@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/en/AlegreyaSans.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "JetBrainsMapleMono";
  src: url("/fonts/default/JetBrainsMapleMono/JetBrainsMapleMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrainsMapleMono";
  src: url("/fonts/default/JetBrainsMapleMono/JetBrainsMapleMono-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: oklch(0.96 0.01 240);
  --bg-soft: oklch(0.985 0.006 220);
  --ink: oklch(0.24 0.02 255);
  --muted: oklch(0.54 0.03 248);
  --line: oklch(0.86 0.02 244);
  --panel: rgba(255, 255, 255, 0.76);
  --panel-strong: rgba(255, 255, 255, 0.9);
  --shadow: 0 28px 70px rgba(44, 71, 122, 0.08);
  --display-font: "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui-font: "Alegreya Sans", "PingFang SC", sans-serif;
  --accent: oklch(0.63 0.19 255);
  --accent-strong: oklch(0.54 0.22 259);
  --accent-rgb: 67, 111, 255;
  --warning: oklch(0.62 0.18 24);
  --scrollbar-size: 9px;
  --scrollbar-thumb: rgba(124, 145, 198, 0.24);
  --scrollbar-thumb-hover: rgba(124, 145, 198, 0.4);
  --scrollbar-thumb-border: 2px;
  --scrollbar-thumb-border-hover: 1px;
  --scrollbar-track: rgba(255, 255, 255, 0.08);
}

body[data-page-accent="scenes"] {
  --accent: oklch(0.68 0.17 156);
  --accent-strong: oklch(0.58 0.18 156);
  --accent-rgb: 35, 171, 122;
}

body[data-page-accent="styles"] {
  --accent: oklch(0.72 0.18 28);
  --accent-strong: oklch(0.64 0.21 30);
  --accent-rgb: 255, 118, 94;
}

body[data-page-accent="results"] {
  --accent: oklch(0.79 0.16 95);
  --accent-strong: oklch(0.71 0.17 93);
  --accent-rgb: 234, 185, 58;
  --result-filter-scroll-intensity: 0;
  --result-filter-scroll-alpha: 1;
}

body[data-page-accent="settings"] {
  --accent: oklch(0.65 0.16 205);
  --accent-strong: oklch(0.55 0.18 210);
  --accent-rgb: 27, 170, 206;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.16), transparent 26%),
    radial-gradient(circle at 100% 14%, rgba(40, 215, 187, 0.14), transparent 24%),
    radial-gradient(circle at 20% 100%, rgba(255, 125, 91, 0.13), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(244, 247, 255, 0.94)),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
  font-family: var(--ui-font);
}

:where(
  .compose-panel,
  .stage-panel,
  .settings-sidebar,
  .settings-content,
  .page-view-results .library-section,
  .page-scroll-region,
  .scene-editor-scroll,
  .style-picker-scroll,
  .style-detail-scene-groups,
  .style-detail-info-grid,
  .style-detail-body-copy,
  .custom-select-menu,
  .mockup-select-menu,
  textarea,
  .prompt-preview
) {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

:where(
  .compose-panel,
  .stage-panel,
  .settings-sidebar,
  .settings-content,
  .page-view-results .library-section,
  .page-scroll-region,
  .scene-editor-scroll,
  .style-picker-scroll,
  .style-detail-scene-groups,
  .style-detail-info-grid,
  .style-detail-body-copy,
  .custom-select-menu,
  .mockup-select-menu,
  textarea,
  .prompt-preview
)::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

:where(
  .compose-panel,
  .stage-panel,
  .settings-sidebar,
  .settings-content,
  .page-view-results .library-section,
  .page-scroll-region,
  .scene-editor-scroll,
  .style-picker-scroll,
  .style-detail-scene-groups,
  .style-detail-info-grid,
  .style-detail-body-copy,
  .custom-select-menu,
  .mockup-select-menu,
  textarea,
  .prompt-preview
)::-webkit-scrollbar-track {
  background: transparent;
}

:where(
  .compose-panel,
  .stage-panel,
  .settings-sidebar,
  .settings-content,
  .page-view-results .library-section,
  .page-scroll-region,
  .scene-editor-scroll,
  .style-picker-scroll,
  .style-detail-scene-groups,
  .style-detail-info-grid,
  .style-detail-body-copy,
  .custom-select-menu,
  .mockup-select-menu,
  textarea,
  .prompt-preview
)::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: var(--scrollbar-thumb-border) solid transparent;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

:where(
  .compose-panel,
  .stage-panel,
  .settings-sidebar,
  .settings-content,
  .page-view-results .library-section,
  .page-scroll-region,
  .scene-editor-scroll,
  .style-picker-scroll,
  .style-detail-scene-groups,
  .style-detail-info-grid,
  .style-detail-body-copy,
  .custom-select-menu,
  .mockup-select-menu,
  textarea,
  .prompt-preview
):hover::-webkit-scrollbar-thumb {
  border-width: var(--scrollbar-thumb-border-hover);
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

:where(
  .compose-panel,
  .stage-panel,
  .settings-sidebar,
  .settings-content,
  .page-scroll-region,
  .scene-editor-scroll,
  .style-picker-scroll,
  .style-detail-scene-groups,
  .style-detail-info-grid,
  .style-detail-body-copy,
  .custom-select-menu,
  .mockup-select-menu,
  textarea,
  .prompt-preview
)::-webkit-scrollbar-corner {
  background: transparent;
}

body.is-busy {
  cursor: progress;
}

body.is-dialog-open {
  position: fixed;
  inset: var(--scroll-lock-top, 0) 0 auto 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-dialog-open .compose-panel,
body.is-dialog-open .stage-panel,
body.is-dialog-open .scene-manager-sidebar,
body.is-dialog-open .scene-manager-editor,
body.is-dialog-open .scene-library-board,
body.is-dialog-open .settings-board,
body.is-dialog-open .settings-stream,
body.is-dialog-open .library-section,
body.is-dialog-open .recent-section {
  overflow: hidden;
}

button,
input,
textarea,
select,
a {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

.studio-shell {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 0;
  min-height: 100vh;
}

.style-picker-dialog,
.scene-init-dialog,
.scene-editor-drawer-dialog,
.style-detail-dialog,
.result-detail-dialog {
  border: 1px solid rgba(124, 145, 198, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--panel));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.mockup-dialog {
  width: min(1520px, calc(100vw - 36px));
  max-width: 1520px;
  height: calc(100vh - 36px);
  max-height: calc(100vh - 36px);
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.mockup-dialog::backdrop {
  background: rgba(238, 244, 255, 0.3);
  backdrop-filter: blur(10px);
}

.mockup-dialog-card {
  border: 1px solid rgba(124, 145, 198, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--panel));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
}

.mockup-dialog-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(260px, 320px);
  grid-template-rows: minmax(0, 1fr);
  gap: 20px;
  min-height: 0;
  height: 100%;
  max-height: none;
}

.mockup-control-panel,
.mockup-preview-panel,
.mockup-render-settings-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 250, 255, 0.66)),
    rgba(255, 255, 255, 0.4);
}

.mockup-control-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 0;
  padding: 18px 0 18px 18px;
  overflow: hidden;
}

.mockup-render-settings-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  min-height: 0;
  padding: 18px 0 0 18px;
  overflow: hidden;
}

.mockup-control-grid {
  display: grid;
  gap: 12px;
}

.mockup-scroll-viewport {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mockup-scroll-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.mockup-scroll-viewport-left {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-right: 12px;
}

.mockup-render-settings-body {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: min-content;
  padding-right: 12px;
}

.mockup-scrollbar {
  position: relative;
  align-self: stretch;
  width: 6px;
  margin: 0 6px 0 0;
  border-radius: 999px;
  background: transparent;
  flex: 0 0 auto;
}

.mockup-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 1px;
  width: 4px;
  min-height: 28px;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  transition:
    width 140ms ease,
    left 140ms ease,
    background 140ms ease;
}

.mockup-scrollbar:hover .mockup-scrollbar-thumb,
.mockup-scrollbar-thumb.is-dragging {
  left: 0;
  width: 6px;
  background: var(--scrollbar-thumb-hover);
}

.mockup-scrollbar[hidden] {
  display: none;
}

.mockup-upload-dropzone {
  min-height: 160px;
}

.mockup-preview-panel {
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 18px;
  overflow: hidden;
}

.mockup-render-canvas {
  position: relative;
  width: min(100%, 880px);
  height: auto;
  aspect-ratio: var(--mockup-render-aspect-ratio, 1 / 1);
  max-width: 100%;
  max-height: 100%;
  justify-self: center;
  overflow: hidden;
  border-radius: 4px;
  background:
    radial-gradient(circle at 15% 15%, var(--mockup-render-bg-tint-a, rgba(var(--accent-rgb), 0.22)), transparent 34%),
    radial-gradient(circle at 85% 20%, var(--mockup-render-bg-tint-b, rgba(40, 215, 187, 0.18)), transparent 28%),
    radial-gradient(circle at 72% 84%, var(--mockup-render-bg-tint-c, rgba(95, 112, 210, 0.12)), transparent 40%),
    linear-gradient(180deg, var(--mockup-render-bg-base-top, rgba(244, 248, 255, 0.92)), var(--mockup-render-bg-base-bottom, rgba(220, 230, 246, 0.74)));
  box-shadow: inset 0 0 0 1px var(--mockup-render-bg-outline, rgba(118, 136, 186, 0.18));
  flex: 0 0 auto;
}

.mockup-render-background {
  position: absolute;
  left: calc(var(--mockup-render-background-blur, 0px) * -2);
  top: calc(var(--mockup-render-background-blur, 0px) * -2);
  width: calc(100% + (var(--mockup-render-background-blur, 0px) * 4));
  height: calc(100% + (var(--mockup-render-background-blur, 0px) * 4));
  object-fit: cover;
  opacity: var(--mockup-render-background-opacity, 0);
  filter: blur(var(--mockup-render-background-blur, 0px));
  pointer-events: none;
}

.mockup-background-effect-picker-field {
  gap: 10px;
}

.mockup-background-effect-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.mockup-background-effect-row .mockup-select {
  min-width: 0;
}

.mockup-background-filter-entry {
  min-width: 64px;
  min-height: 48px;
  padding: 0 14px;
  justify-content: center;
  white-space: nowrap;
}

.mockup-image-filter-dialog {
  width: min(1080px, calc(100vw - 42px));
  max-width: 1080px;
  height: min(720px, calc(100vh - 42px));
  max-height: calc(100vh - 42px);
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.mockup-image-filter-dialog::backdrop {
  background: rgba(238, 244, 255, 0.36);
  backdrop-filter: blur(10px);
}

.mockup-image-filter-dialog-card {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(124, 145, 198, 0.2);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(247, 250, 255, 0.82));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.mockup-image-filter-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 20px;
}

.mockup-image-filter-preview-panel,
.mockup-image-filter-control-panel {
  min-width: 0;
  min-height: 0;
}

.mockup-image-filter-preview-panel {
  padding: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.58);
}

.mockup-image-filter-preview {
  width: 100%;
  max-width: 680px;
  aspect-ratio: var(--mockup-render-aspect-ratio, 1 / 1);
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, var(--mockup-render-bg-tint-a, rgba(var(--accent-rgb), 0.18)), transparent 34%),
    linear-gradient(180deg, rgba(244, 248, 255, 0.92), rgba(220, 230, 246, 0.74));
  box-shadow: inset 0 0 0 1px rgba(118, 136, 186, 0.18);
}

.mockup-image-filter-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mockup-image-filter-preview.is-error {
  box-shadow:
    inset 0 0 0 1px rgba(191, 79, 79, 0.22),
    0 0 0 4px rgba(191, 79, 79, 0.08);
}

.mockup-image-filter-control-panel {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 2px 4px 2px 0;
  overflow: auto;
}

.mockup-image-filter-filter-field {
  gap: 10px;
}

.mockup-image-filter-type-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.mockup-image-filter-controls {
  display: grid;
  gap: 14px;
  padding-top: 2px;
}

.mockup-image-filter-range {
  gap: 8px;
}

.mockup-image-filter-toggle {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.mockup-image-filter-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-strong);
}

@media (max-width: 860px) {
  .mockup-image-filter-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(260px, 1fr) minmax(0, auto);
  }

  .mockup-image-filter-control-panel {
    max-height: 300px;
  }
}
.mockup-preview-shell {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 2vw, 28px);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.mockup-preview-transition-ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 220ms cubic-bezier(0.25, 1, 0.5, 1);
}

.mockup-preview-transition-ghost.is-exit {
  opacity: 0;
}

.mockup-preview-device-wrap {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform:
    translateY(var(--mockup-device-offset-y, 0%))
    scale(calc(var(--mockup-user-device-scale, 1) * var(--mockup-auto-device-scale, 1)));
  transform-origin: center;
  transition:
    opacity 220ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 140ms ease;
  transform-style: preserve-3d;
}

.mockup-preview-device-wrap.is-active {
  z-index: 1;
}

.mockup-preview-device-wrap[data-mockup-preview-standby="1"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.mockup-preview-device-wrap.is-entering {
  opacity: 0;
}

.mockup-preview-device-wrap.is-no-transition {
  transition: none;
}

.mockup-preview-stage {
  position: relative;
  width: var(--mockup-stage-fit-width, 72%);
  max-width: min(100%, var(--mockup-stage-max-width, 100%));
  max-height: 100%;
  aspect-ratio: var(--mockup-frame-aspect-ratio, 1 / 1);
  display: grid;
  place-items: center;
  filter: var(--mockup-stage-shadow, none);
  transform:
    perspective(1600px)
    rotateX(var(--mockup-perspective-rotate-x, 0deg))
    rotateY(var(--mockup-perspective-rotate-y, 0deg));
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.mockup-preview-stage.is-interacting {
  transition: none;
}

.mockup-preview-mask,
.mockup-preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mockup-preview-mask {
  -webkit-mask-image: var(--mockup-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--mockup-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}

.mockup-preview-render {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 177, 91, 0.96), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(79, 216, 255, 0.92), transparent 24%),
    radial-gradient(circle at 76% 82%, rgba(122, 95, 255, 0.8), transparent 26%),
    linear-gradient(135deg, #ff6b7c 0%, #ff8f58 24%, #8163ff 56%, #23c7d4 100%);
  background-size: cover;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -24px 48px rgba(11, 19, 36, 0.16);
}

.mockup-preview-render[data-mockup-placeholder="0"] {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.17) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.17) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.17) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.17) 75%),
    linear-gradient(135deg, rgba(236, 241, 248, 0.96), rgba(225, 231, 241, 0.96));
  background-position: 0 0, 0 0, 12px 12px, 12px 12px, 0 0;
  background-size: 24px 24px;
  box-shadow:
    inset 0 0 0 1px rgba(132, 152, 190, 0.18),
    inset 0 -22px 38px rgba(11, 19, 36, 0.06);
}

.mockup-preview-render::before,
.mockup-preview-render::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mockup-preview-render::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.32) 0 14%, transparent 14% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: calc(0.8 - (var(--mockup-render-placeholder, 0) * 0.48));
}

.mockup-preview-render::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 0),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 0),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 0);
  background-repeat: no-repeat;
  background-position:
    14% 18%,
    14% 42%,
    14% 68%;
  background-size:
    calc(72% - 28px) 12px,
    calc(58% - 18px) 12px,
    calc(42% - 14px) 12px;
  opacity: calc(var(--mockup-render-placeholder, 0) * 0.95);
}

.mockup-preview-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.mockup-preview-image[hidden] {
  display: none;
}

.mockup-preview-frame {
  object-fit: contain;
  transform: scale(var(--mockup-device-scale, 1));
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.mockup-preview-device-wrap.is-device-bypassed {
  padding: 0;
}

.mockup-preview-device-wrap.is-device-bypassed .mockup-preview-mask {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  -webkit-mask-image: none;
  mask-image: none;
}

.mockup-preview-device-wrap.is-device-bypassed .mockup-preview-image {
  object-fit: contain;
}

.mockup-preview-device-wrap.is-device-bypassed .mockup-preview-render {
  width: var(--mockup-bypass-content-width, 100%);
  height: var(--mockup-bypass-content-height, 100%);
  box-sizing: border-box;
  border: var(--mockup-bypass-border-width, 0) solid transparent;
  border-radius: var(--mockup-bypass-border-radius, 0);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 177, 91, 0.96), transparent 28%) padding-box,
    radial-gradient(circle at 82% 20%, rgba(79, 216, 255, 0.92), transparent 24%) padding-box,
    radial-gradient(circle at 76% 82%, rgba(122, 95, 255, 0.8), transparent 26%) padding-box,
    linear-gradient(135deg, #ff6b7c 0%, #ff8f58 24%, #8163ff 56%, #23c7d4 100%) padding-box,
    radial-gradient(circle at 14% 12%, var(--mockup-bypass-border-glow, rgba(255, 255, 255, 0.18)) 0%, rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0) 62%) border-box,
    linear-gradient(138deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0) 36%, var(--mockup-bypass-border-sheen, rgba(255, 255, 255, 0.14)) 58%, rgba(255, 255, 255, 0) 78%) border-box,
    linear-gradient(180deg, var(--mockup-bypass-border-top, var(--mockup-bypass-border-color, transparent)), var(--mockup-bypass-border-middle, var(--mockup-bypass-border-color, transparent)) 46%, var(--mockup-bypass-border-bottom, var(--mockup-bypass-border-color, transparent))) border-box;
  box-shadow:
    0 calc(var(--mockup-bypass-border-width, 0px) * 0.18) calc(var(--mockup-bypass-border-width, 0px) * 0.7) var(--mockup-bypass-border-outer-shadow, rgba(12, 18, 30, 0.12)),
    inset 0 1px 0 var(--mockup-bypass-border-inner-light, rgba(255, 255, 255, 0.18)),
    inset 0 calc(var(--mockup-bypass-border-width, 0px) * -0.16) calc(var(--mockup-bypass-border-width, 0px) * 0.34) var(--mockup-bypass-border-glow, rgba(255, 255, 255, 0.18)),
    inset 0 calc(var(--mockup-bypass-border-width, 0px) * 0.28) calc(var(--mockup-bypass-border-width, 0px) * 0.62) var(--mockup-bypass-border-inner-shadow, rgba(12, 18, 30, 0.16));
  overflow: hidden;
}

.mockup-preview-device-wrap.is-device-bypassed .mockup-preview-render[data-mockup-placeholder="0"] {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.17) 25%, transparent 25%) padding-box,
    linear-gradient(-45deg, rgba(255, 255, 255, 0.17) 25%, transparent 25%) padding-box,
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.17) 75%) padding-box,
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.17) 75%) padding-box,
    linear-gradient(135deg, rgba(236, 241, 248, 0.96), rgba(225, 231, 241, 0.96)) padding-box,
    radial-gradient(circle at 14% 12%, var(--mockup-bypass-border-glow, rgba(255, 255, 255, 0.18)) 0%, rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0) 62%) border-box,
    linear-gradient(138deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0) 36%, var(--mockup-bypass-border-sheen, rgba(255, 255, 255, 0.14)) 58%, rgba(255, 255, 255, 0) 78%) border-box,
    linear-gradient(180deg, var(--mockup-bypass-border-top, var(--mockup-bypass-border-color, transparent)), var(--mockup-bypass-border-middle, var(--mockup-bypass-border-color, transparent)) 46%, var(--mockup-bypass-border-bottom, var(--mockup-bypass-border-color, transparent))) border-box;
  background-position: 0 0, 0 0, 12px 12px, 12px 12px, 0 0, 0 0, 0 0, 0 0;
  background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px, 24px 24px, auto, auto, auto;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}

.mockup-preview-device-wrap.is-device-bypassed .mockup-preview-render[data-mockup-placeholder="0"]::before,
.mockup-preview-device-wrap.is-device-bypassed .mockup-preview-render[data-mockup-placeholder="0"]::after {
  opacity: 0;
}

.mockup-preview-device-wrap.is-device-bypassed .mockup-preview-frame {
  display: none;
}

.mockup-range-field {
  gap: 10px;
}

.mockup-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mockup-select {
  position: relative;
  z-index: 3;
}

.mockup-select-trigger {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid rgba(124, 145, 198, 0.16);
  background: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.mockup-select-trigger:hover,
.mockup-select-trigger:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.24);
  background: rgba(var(--accent-rgb), 0.08);
}

.mockup-select-caret {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid rgba(128, 144, 173, 0.92);
  border-bottom: 1.5px solid rgba(128, 144, 173, 0.92);
  transform: rotate(45deg) translateY(-1px);
  flex: 0 0 auto;
}

.mockup-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 280px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  background: rgba(252, 253, 255, 0.98);
  box-shadow: 0 18px 40px rgba(31, 41, 65, 0.12);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: 4;
  display: grid;
  gap: 8px;
}

.mockup-select-option {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.mockup-select-option:hover,
.mockup-select-option:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.24);
  background: rgba(var(--accent-rgb), 0.08);
}

.mockup-select-option.is-active {
  border-color: rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-strong);
}

.mockup-option-grid .filter-chip {
  min-height: 40px;
  padding: 0 14px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.mockup-option-grid .filter-chip:hover,
.mockup-option-grid .filter-chip:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.24);
  background: rgba(var(--accent-rgb), 0.08);
}

.mockup-option-grid .filter-chip:disabled {
  cursor: default;
  opacity: 0.5;
}

.mockup-border-color-chip {
  min-width: 40px;
  justify-content: center;
  padding: 0;
}

.mockup-border-color-chip-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--mockup-border-chip-background, #111827);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.mockup-range-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mockup-range-value {
  color: var(--ink);
  font-weight: 600;
}

.mockup-range-title-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.mockup-range-title-btn:hover,
.mockup-range-title-btn:focus-visible {
  outline: none;
  color: inherit;
}

.mockup-range-field input[type="range"] {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  accent-color: rgb(var(--accent-rgb));
  -webkit-appearance: none;
  appearance: none;
  overflow: visible;
}

.mockup-range-field input[type="range"]:focus {
  box-shadow: none;
}

.mockup-range-field input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  margin: 0 1px;
  background: rgba(124, 145, 198, 0.22);
}

.mockup-range-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -7px;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--accent-rgb));
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.22);
}

.mockup-range-field input[type="range"]::-moz-range-track {
  height: 10px;
  border: 0;
  border-radius: 999px;
  margin: 0 1px;
  background: rgba(124, 145, 198, 0.22);
}

.mockup-range-field input[type="range"]::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.84);
}

.mockup-range-field input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--accent-rgb));
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.22);
}

.mockup-render-settings-footer {
  display: grid;
  gap: 12px;
  padding: 12px 0 18px;
  margin-top: auto;
  border-top: 1px solid rgba(124, 145, 198, 0.12);
  position: sticky;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(247, 250, 255, 0.82), rgba(247, 250, 255, 0.96)),
    rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
}

.mockup-render-feedback {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

.mockup-render-feedback.is-error {
  color: #bf4f5d;
}

.studio-sidebar {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 24px 18px 24px 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid rgba(124, 145, 198, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 250, 255, 0.58)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), transparent 38%);
  backdrop-filter: blur(10px);
}

.brand-block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.brand-copy {
  display: grid;
  gap: 2px;
}

.brand-eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-copy h1,
.selected-style-title {
  margin: 0;
  font-family: var(--display-font);
  font-weight: 400;
}

.style-detail-empty-title,
.style-card-title,
.recent-card-title,
.scene-library-title,
.stage-empty-title,
.panel-title {
  margin: 0;
  font-family: var(--ui-font);
  font-weight: 400;
}

.brand-copy h1 {
  font-size: clamp(0.96rem, 1.2vw, 1.16rem);
  line-height: 1.1;
}

.studio-main {
  min-width: 0;
  display: grid;
  gap: 0;
  padding: 22px 26px 24px;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

body[data-meta-loading="true"] .studio-main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.92), transparent);
  animation: artwork-progress 1s linear infinite;
  z-index: 8;
}

.page-nav {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(124, 145, 198, 0.12);
}

.page-nav-link {
  --nav-rgb: 67, 111, 255;
  --nav-color: oklch(0.54 0.22 259);
  min-height: 58px;
  padding: 0 0 0 12px;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(124, 145, 198, 0.12);
  background: transparent;
  transition: transform 140ms ease, background 140ms ease, color 140ms ease;
}

.page-nav-link[data-nav-link="scenes"] {
  --nav-rgb: 35, 171, 122;
  --nav-color: oklch(0.58 0.18 156);
}

.page-nav-link[data-nav-link="styles"] {
  --nav-rgb: 255, 118, 94;
  --nav-color: oklch(0.64 0.21 30);
}

.page-nav-link[data-nav-link="results"] {
  --nav-rgb: 234, 185, 58;
  --nav-color: oklch(0.64 0.16 93);
}

.page-nav-link[data-nav-link="settings"] {
  --nav-rgb: 27, 170, 206;
  --nav-color: oklch(0.55 0.18 210);
}

.page-nav-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: rgba(var(--nav-rgb), 0.56);
  fill: currentColor;
  overflow: visible;
  transition: color 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.page-nav-icon-soft {
  opacity: 0.26;
}

.page-nav-icon-accent {
  opacity: 0.72;
}

.page-nav-label {
  font-family: var(--ui-font);
  font-size: 0.98rem;
  line-height: 1;
}

.page-nav-link.is-active {
  background: linear-gradient(90deg, rgba(var(--nav-rgb), 0.12), transparent 76%);
  color: var(--nav-color);
  box-shadow: inset 3px 0 0 rgba(var(--nav-rgb), 0.7);
}

.page-nav-link.is-active .page-nav-icon {
  color: var(--nav-color);
}

.page-nav-link:hover,
.text-btn:hover,
.text-link:hover,
.ghost-btn:hover,
.solid-btn:hover,
.style-card:hover,
.recent-card:hover,
.reference-dropzone:hover,
.selected-style-remove:hover,
.reference-remove:hover,
.stage-image-trigger:hover {
  transform: translateY(-1px);
}

.page-nav-link:hover .page-nav-icon {
  color: var(--nav-color);
}

.page-nav-link:hover .page-nav-icon-accent,
.page-nav-link.is-active .page-nav-icon-accent {
  opacity: 0.92;
}

.page-stack,
.page-view,
.compose-layout,
.scene-manager-layout,
.settings-layout {
  display: grid;
  gap: clamp(14px, 1.5vw, 18px);
}

.page-stack {
  min-width: 0;
}

.page-view-styles {
  align-content: start;
}

.page-view-scenes,
.page-view-styles,
.page-view-results {
  min-height: 0;
  height: calc(100vh - 46px);
}

.page-view-results {
  padding: clamp(16px, 1.6vw, 22px);
}

.compose-layout {
  grid-template-columns: minmax(460px, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  min-width: 0;
  padding: 0;
  height: calc(100vh - 46px);
  min-height: 0;
  overflow: hidden;
}

.scene-manager-layout {
  grid-template-columns: minmax(320px, 0.54fr) minmax(0, 1.46fr);
  align-items: start;
  min-width: 0;
  padding: 0;
  height: calc(100vh - 46px);
  min-height: 0;
}

.settings-layout {
  grid-template-columns: 1fr;
  align-items: start;
  min-width: 0;
  padding: 0;
  height: calc(100vh - 46px);
  min-height: 0;
  overflow: hidden;
}

.settings-frame {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.settings-sidebar {
  align-self: stretch;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px);
  border-right: 1px solid rgba(124, 145, 198, 0.12);
  min-height: 0;
  overflow-y: auto;
}

.settings-nav,
.settings-nav-group {
  display: grid;
}

.settings-nav {
  gap: 10px;
}

.settings-nav-group {
  gap: 4px;
}

.settings-nav-divider {
  height: 1px;
  background: rgba(124, 145, 198, 0.12);
  margin: 6px 0;
}

.settings-nav-link {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: var(--muted);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.settings-nav-link:hover {
  color: var(--accent-strong);
  background: rgba(var(--accent-rgb), 0.06);
}

.settings-nav-link.is-active {
  color: var(--accent-strong);
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent 86%),
    rgba(255, 255, 255, 0.74);
}

.settings-nav-label {
  font-size: 0.94rem;
}

.settings-content {
  min-width: 0;
  padding: clamp(16px, 1.6vw, 22px);
  min-height: 0;
  overflow-y: auto;
}

.settings-page {
  display: none;
}

.settings-page.is-active {
  display: block;
}

.compose-panel,
.stage-panel,
.scene-manager-sidebar,
.scene-manager-editor,
.scene-library-board,
.library-section,
.recent-section {
  padding: clamp(16px, 1.6vw, 22px);
}

.compose-panel,
.stage-panel,
.scene-manager-sidebar,
.scene-manager-editor,
.scene-library-board,
.settings-board,
.library-section {
  display: grid;
  gap: 18px;
}

.compose-panel,
.stage-panel,
.settings-board,
.settings-stream {
  align-content: start;
  min-width: 0;
  min-height: 0;
}

.compose-panel,
.stage-panel {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.settings-board {
  gap: 18px;
  padding: clamp(18px, 2vw, 26px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 249, 255, 0.74)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.04), transparent 44%);
}

.scene-manager-sidebar,
.scene-manager-editor {
  min-height: 0;
  height: 100%;
  overscroll-behavior: contain;
}

.scene-manager-sidebar {
  align-content: start;
  grid-template-rows: auto minmax(0, 1fr);
}

.scene-manager-editor {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  align-content: stretch;
}

.compose-panel,
.scene-manager-sidebar,
.scene-manager-editor,
.settings-board,
.library-section,
.recent-section {
  box-shadow: none;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.compose-panel,
.scene-manager-sidebar {
  border-right: 1px solid rgba(124, 145, 198, 0.12);
  padding-right: clamp(18px, 2vw, 28px);
}

.stage-panel,
.scene-manager-editor {
  padding-left: clamp(18px, 2vw, 28px);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.compose-panel > * {
  min-width: 0;
}

.compose-panel .panel-head {
  min-width: 0;
  flex-wrap: wrap;
}

.compose-panel .panel-head > * {
  min-width: 0;
}

.panel-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scene-request-panel .panel-head {
  align-items: flex-start;
}

.page-fixed-head {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.page-scroll-region {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 6px;
  padding-bottom: 0;
  align-content: start;
}

.panel-title {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.stage-meta,
.feedback-line,
.result-detail-meta,
.style-detail-meta {
  color: var(--muted);
}

.scene-selection,
.scene-library-list,
.selection-panel,
.reference-panel,
.control-panel,
.scene-request-panel,
.schema-panel,
.settings-form,
.model-settings-list,
.style-source-settings-list {
  display: grid;
  gap: 12px;
}

.scene-selection {
  align-items: start;
  min-width: 0;
}

.model-select-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.compose-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  max-width: 100%;
  min-width: 0;
  border: 1px solid rgba(124, 145, 198, 0.16);
  background: rgba(255, 255, 255, 0.58);
}

.compose-mode-tab {
  appearance: none;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid rgba(124, 145, 198, 0.12);
  background: transparent;
  color: var(--muted);
}

.compose-mode-tab:last-child {
  border-right: 0;
}

.compose-mode-tab.is-active {
  color: var(--accent-strong);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.56);
}

.compose-mode-tab:disabled,
.compose-mode-tab.is-disabled {
  cursor: not-allowed;
  color: color-mix(in oklch, var(--muted) 66%, white);
  background: rgba(124, 145, 198, 0.06);
  box-shadow: none;
}

.template-form-stack {
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  min-width: 0;
}

.template-field-section {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(246, 249, 255, 0.62)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.03), transparent 54%);
}

.template-field-section.template-canvas-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 248, 255, 0.78)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), rgba(40, 215, 187, 0.03) 58%, transparent 100%);
}

.template-section-head {
  display: grid;
  gap: 4px;
}

.template-section-head strong {
  color: var(--accent-strong);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.template-section-head span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.template-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.template-inline-grid-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.template-inline-grid > *,
.template-inline-grid-wide > *,
.template-toggle-grid > *,
.template-definition-grid > * {
  align-self: start;
}

.template-background-picker-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}

.template-background-picker-item {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.template-background-picker-item:hover,
.template-background-picker-item:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.24);
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(84, 103, 146, 0.08);
  outline: none;
}

.template-background-picker-item.is-active {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.94));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 10px 24px rgba(84, 103, 146, 0.08);
}

.template-background-picker-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(226, 233, 245, 0.72);
}

.template-background-picker-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: color-mix(in oklch, var(--muted) 82%, var(--ink));
}

.template-background-control-grid .field {
  padding: 10px 12px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(245, 248, 255, 0.76));
}

.template-background-control-grid .field > span {
  color: var(--accent-strong);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.template-background-color-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-background-control-grid .field input[type="range"] {
  padding: 0;
  border: 0;
  background: transparent;
}

.template-background-control-grid .template-definition-field-hint {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.template-background-picker-item.is-active span {
  color: color-mix(in oklch, var(--accent-strong) 84%, black);
}

.template-items-list {
  display: grid;
  gap: 10px;
}

.template-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(84px, 0.52fr)) auto;
  gap: 10px;
  align-items: end;
  padding-top: 10px;
  border-top: 1px dashed rgba(124, 145, 198, 0.18);
}

.template-item-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.template-item-name {
  min-width: 0;
}

.template-item-remove {
  min-height: 40px;
  align-self: center;
}

.template-add-item-btn {
  justify-self: start;
  min-height: 40px;
}

.template-range-field {
  align-content: start;
}

.template-range-field span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.template-range-field strong {
  color: var(--accent-strong);
  font-weight: 600;
}

.template-range-field input[type="range"] {
  width: 100%;
  min-height: 0;
  padding: 0;
  accent-color: rgb(var(--accent-rgb));
}

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

.template-toggle {
  min-height: 44px;
  background: rgba(255, 255, 255, 0.72);
}

.template-feature-field {
  display: grid;
  gap: 12px;
  align-self: start;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 249, 255, 0.7)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.035), transparent 58%);
}

.template-feature-field.field-wide {
  grid-column: 1 / -1;
}

.template-feature-label-row {
  justify-content: space-between;
  gap: 12px;
}

.template-feature-label-text {
  min-width: 0;
}

.template-feature-status {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1;
}

.template-feature-query-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.template-feature-query-row > .field {
  min-width: 0;
}

.template-feature-query-action {
  min-height: 48px;
}

.template-feature-actions {
  justify-content: flex-end;
}

.template-icon-current {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px dashed rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background: rgba(247, 250, 255, 0.72);
}

.template-icon-current.is-active {
  border-style: solid;
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.06);
}

.template-icon-current.is-empty {
  background: rgba(248, 250, 255, 0.68);
}

.template-icon-current-visual {
  inline-size: 54px;
  block-size: 54px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(124, 145, 198, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  overflow: hidden;
}

.template-icon-current-visual img {
  display: block;
  inline-size: 28px;
  block-size: 28px;
}

.template-icon-current-visual iconify-icon {
  font-size: 1.5rem;
  color: color-mix(in oklch, var(--accent-strong) 72%, var(--ink) 28%);
}

.template-icon-current-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.template-icon-current-copy strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.template-icon-current-copy small {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-icon-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-icon-control-group {
  display: grid;
  gap: 10px;
}

.template-icon-field {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.template-icon-control-label {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.template-icon-preset {
  appearance: none;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(124, 145, 198, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, color 140ms ease;
}

.template-icon-preset iconify-icon {
  font-size: 1rem;
  color: currentColor;
}

.template-icon-preset:hover,
.template-icon-preset:focus-visible,
.template-icon-result:hover,
.template-icon-result:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.24);
  background: rgba(var(--accent-rgb), 0.08);
}

.template-icon-preset.is-active,
.template-icon-result.is-active {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-strong);
}

.template-icon-search-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.template-icon-search-shell input {
  min-width: 0;
}

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

.template-icon-empty {
  grid-column: 1 / -1;
  min-height: 52px;
  padding: 0 16px;
  border: 1px dashed rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.84), rgba(243, 247, 254, 0.76));
  color: color-mix(in oklch, var(--muted) 82%, var(--ink) 18%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.template-icon-result {
  appearance: none;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.template-icon-result-visual {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 4px;
  background: rgba(245, 248, 254, 0.96);
  box-shadow: inset 0 0 0 1px rgba(124, 145, 198, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-icon-result-visual img {
  display: block;
  inline-size: 22px;
  block-size: 22px;
}

.template-icon-result-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.template-icon-result-copy strong,
.template-icon-result-copy small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-icon-result-copy strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.template-icon-result-copy small {
  color: var(--muted);
  font-size: 0.74rem;
}

.template-stage-preview-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(12px, 1.4vw, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-stage-preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 38px rgba(8, 13, 30, 0.42));
}

.template-stage-actions {
  padding-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.template-definition-stack {
  display: grid;
  gap: 14px;
}

.template-definition-editor-stack {
  display: grid;
  gap: 18px;
}

.template-structure-section {
  gap: 12px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(124, 145, 198, 0.12);
}

.template-structure-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.template-structure-section-head {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.template-structure-section-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--accent-strong) 64%, white);
}

.template-structure-section-note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.template-structure-toolbar {
  align-items: center;
  gap: 10px;
}

.template-structure-toolbar .template-new-field-type-field {
  min-width: min(220px, 100%);
}

.template-structure-section-card {
  gap: 14px;
}

.template-structure-section-card.is-expanded {
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.05);
}

.template-structure-card-head {
  align-items: flex-start;
}

.template-structure-card-toggle {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
}

.template-structure-card-toggle:hover .template-structure-card-title {
  color: color-mix(in oklch, var(--accent-strong) 78%, black);
}

.template-structure-card-toggle:focus-visible {
  outline: none;
}

.template-structure-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.template-structure-card-title {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.template-structure-card-summary {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.template-structure-section-body {
  display: grid;
  gap: 12px;
}

.template-field-picker-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.template-field-picker-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 8;
  width: min(320px, calc(100vw - 48px));
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), rgba(255, 255, 255, 0.96)),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 40px rgba(31, 41, 65, 0.14);
}

.template-field-picker-copy {
  display: grid;
  gap: 4px;
}

.template-field-picker-copy strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.3;
}

.template-field-picker-copy span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.template-fixed-field-type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.template-fixed-field-type-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(124, 145, 198, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: color-mix(in oklch, var(--accent-strong) 68%, var(--ink));
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.template-fixed-field-type-btn:hover,
.template-fixed-field-type-btn:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-strong);
  outline: none;
}

.template-structure-nested-list {
  padding-left: 0;
  border-left: 0;
}

.template-structure-nested-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(243, 247, 255, 0.78)),
    rgba(255, 255, 255, 0.5);
}

.template-definition-toggle {
  min-height: 51px;
}

.template-definition-field-hint {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.template-definition-default-list,
.template-definition-preset-list {
  display: grid;
  gap: 12px;
}

.template-definition-icon-preset-list {
  display: grid;
  gap: 10px;
}

.template-definition-icon-preset {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.84);
}

.template-definition-icon-preset-visual {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 4px;
  background: rgba(245, 248, 254, 0.96);
  box-shadow: inset 0 0 0 1px rgba(124, 145, 198, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--accent-strong);
}

.template-definition-icon-preset-visual img {
  display: block;
  inline-size: 22px;
  block-size: 22px;
}

.template-definition-icon-preset-visual iconify-icon {
  font-size: 1.15rem;
}

.template-definition-icon-preset-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.template-definition-icon-preset-copy strong,
.template-definition-icon-preset-copy small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-definition-icon-preset-copy strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.template-definition-icon-preset-copy small {
  color: var(--muted);
  font-size: 0.74rem;
}

.schema-card-note .template-definition-chip-row {
  margin-top: 8px;
}

.template-definition-hero,
.template-definition-section {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(246, 249, 255, 0.64)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.03), transparent 52%);
}

.template-definition-description {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.6;
}

.template-definition-meta,
.template-definition-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-definition-meta-chip,
.template-definition-chip {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(124, 145, 198, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1;
}

.template-definition-meta-chip {
  color: var(--accent-strong);
}

.template-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.template-definition-card {
  display: grid;
  gap: 10px;
  align-self: start;
  padding: 12px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.74);
}

.template-definition-card-head {
  display: grid;
  gap: 4px;
}

.template-definition-card-head strong {
  color: var(--accent-strong);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

#compose-feedback {
  padding-top: 10px;
}

.settings-index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: auto;
}

.settings-index-copy,
.settings-section-copy {
  display: grid;
  gap: 4px;
}

.settings-index-meta {
  color: var(--muted);
  line-height: 1.5;
}

.settings-section-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.settings-summary-card {
  min-height: 88px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  background: rgba(255, 255, 255, 0.52);
  display: grid;
  gap: 8px;
  align-content: space-between;
}

.settings-summary-card strong {
  font-family: var(--display-font);
  font-size: clamp(1.2rem, 1.5vw, 1.56rem);
  font-weight: 400;
}

.settings-summary-label {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.settings-summary-card.is-warning strong,
.settings-summary-card.is-warning .settings-summary-label {
  color: color-mix(in oklch, var(--warning) 76%, black);
}

.settings-action-tray {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.filter-strip-secondary {
  padding-top: 2px;
}

.filter-strip-secondary .filter-chip {
  min-height: 34px;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.42);
}

.style-source-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.style-source-row {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  background: rgba(255, 255, 255, 0.64);
}

.style-source-main {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  gap: 3px;
  text-align: left;
}

.style-source-title,
.style-source-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style-source-title {
  color: var(--accent-strong);
}

.style-source-meta {
  color: var(--muted);
  font-size: 0.78rem;
}

.pagination-bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.pagination-current,
.pagination-meta {
  white-space: nowrap;
  font-size: 0.86rem;
}

#style-pagination {
  min-height: 0;
  align-items: flex-start;
  padding: 0;
}

#style-pagination .pagination-actions {
  align-items: flex-start;
}

.settings-current-object {
  display: grid;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(124, 145, 198, 0.12);
}

.settings-current-title {
  font-size: clamp(1.16rem, 1.4vw, 1.4rem);
  font-family: var(--display-font);
}

.settings-current-meta {
  color: var(--muted);
  line-height: 1.5;
}

.settings-stream {
  display: grid;
  gap: 10px;
}

.parameter-template-library {
  display: grid;
  gap: 8px;
  min-height: 0;
  align-content: start;
}

.style-card,
.recent-card,
.scene-library-card,
.model-setting-main {
  appearance: none;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.scene-library-board {
  align-content: start;
  min-height: calc(100vh - 46px);
  height: calc(100vh - 46px);
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}

.scene-library-board-head {
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.scene-library-board-head .ghost-btn {
  min-height: 34px;
}

.scene-library-board-copy {
  display: grid;
  gap: 4px;
}

.scene-library-board-meta,
.scene-editor-drawer-meta {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.scene-type-filter-strip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.scene-library-card span,
.scene-library-card small {
  color: var(--muted);
  line-height: 1.5;
}

.scene-library-card:hover {
  transform: translateY(-1px);
}

.scene-library-card:hover .scene-library-preview {
  transform: rotate(3deg) translateY(-2px);
}

.scene-library-card.is-active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(255, 255, 255, 0.88));
  border-color: rgba(var(--accent-rgb), 0.24);
}

.scene-library-card.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  pointer-events: none;
}

.scene-library-card {
  padding: 0;
  display: block;
  position: relative;
  border: 1px solid rgba(124, 145, 198, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.scene-library-main {
  width: 100%;
  padding: 18px;
  border: 0;
  background: transparent;
  display: grid;
  gap: 12px;
  text-align: left;
  position: relative;
  z-index: 1;
}

.scene-library-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
  align-content: start;
  align-self: start;
  padding-top: 2px;
}

.scene-library-card-top,
.scene-library-footer,
.scene-library-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scene-library-card-top {
  justify-content: space-between;
  align-items: start;
}

.scene-library-description {
  margin: 0;
  color: color-mix(in oklch, var(--muted) 88%, var(--ink));
  line-height: 1.65;
  min-height: 3.3em;
}

.scene-library-meta {
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: 0.82rem;
}

.scene-library-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  background: rgba(255, 255, 255, 0.58);
}

.scene-library-secondary-meta {
  display: grid;
  gap: 8px;
}

.scene-library-secondary-meta span {
  display: block;
  color: color-mix(in oklch, var(--muted) 82%, var(--ink));
  line-height: 1.5;
}

.scene-library-preview-shell {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(120px, 32%, 168px);
  aspect-ratio: 1 / 1.14;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
}

.scene-library-preview {
  position: absolute;
  right: -8px;
  bottom: -10px;
  width: 100%;
  aspect-ratio: 1 / 1.14;
  border-radius: 16px 0 0 0;
  overflow: hidden;
  transform: rotate(4deg);
  opacity: 0.98;
}

.scene-library-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.94) contrast(1.02);
}

.scene-library-preview-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(198deg, rgba(255, 255, 255, 0.04) 12%, rgba(255, 255, 255, 0.12) 44%, rgba(244, 247, 255, 0.6) 78%, rgba(250, 251, 255, 0.92) 100%),
    linear-gradient(232deg, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0.4) 72%, rgba(255, 255, 255, 0.82) 100%);
}

.scene-library-footer {
  justify-content: flex-start;
}

.scene-library-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  white-space: nowrap;
  font-size: 0.78rem;
}

.scene-library-badge-generate {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-strong);
}

.scene-library-badge-edit {
  background: color-mix(in oklch, var(--warning) 10%, white);
  color: color-mix(in oklch, var(--warning) 72%, black);
  border-color: color-mix(in oklch, var(--warning) 22%, white);
}

.scene-library-badge-template {
  background: color-mix(in oklch, oklch(0.88 0.05 95) 74%, white);
  color: color-mix(in oklch, oklch(0.48 0.08 75) 82%, black);
  border-color: color-mix(in oklch, oklch(0.74 0.07 82) 36%, white);
}

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

.template-new-field-type-field {
  min-width: 168px;
}

.field-cluster-triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-group .field-cluster-triple .field input {
  min-height: 44px;
}

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

.scene-title-field {
  margin-bottom: 12px;
}

.field {
  display: grid;
  gap: 8px;
}

.field.field-wide {
  grid-column: 1 / -1;
}

.field-select-plain > span {
  display: none;
}

.field-grow {
  flex: 1 1 0;
}

.field > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.scene-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scene-field-head-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.scene-field-source-indicator {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.scene-field-source-icon {
  font-size: 15px;
  line-height: 1;
  color: rgba(128, 144, 173, 0.82);
  transition: color 140ms ease;
}

.field.scene-field-source:focus-within .scene-field-source-icon,
.scene-multi-select.scene-field-source:focus-within .scene-field-source-icon {
  color: var(--accent-strong);
}

.scene-field-auto-btn {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--accent-strong);
  pointer-events: auto;
  transition: color 140ms ease;
  cursor: pointer;
}

.scene-field-auto-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in oklch, white 88%, rgba(var(--accent-rgb), 0.07));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.1);
  transition: background 140ms ease, box-shadow 140ms ease;
  pointer-events: none;
  z-index: 0;
}

.scene-field-auto-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(999px - 1px);
  background: rgba(255, 255, 255, 0.22);
  transition: background 140ms ease;
  pointer-events: none;
  z-index: 2;
}

.scene-field-auto-btn:hover,
.scene-field-auto-btn:focus-visible {
  outline: none;
}

.scene-field-auto-btn:hover::before,
.scene-field-auto-btn:focus-visible::before {
  background: color-mix(in oklch, white 78%, rgba(var(--accent-rgb), 0.14));
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.14),
    0 0 0 4px rgba(var(--accent-rgb), 0.08);
}

.scene-field-auto-btn:hover::after,
.scene-field-auto-btn:focus-visible::after {
  background: rgba(255, 255, 255, 0.26);
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 20;
}

.scene-field-auto-btn-icon,
.scene-field-auto-btn-spinner {
  position: relative;
  z-index: 1;
  pointer-events: none;
  font-size: 16px;
  line-height: 1;
}

.scene-field-auto-btn-spinner {
  display: none;
}

.scene-field-auto-btn.is-loading .scene-field-auto-btn-icon {
  display: none;
}

.scene-field-auto-btn.is-loading .scene-field-auto-btn-spinner {
  display: inline-block;
  animation: artwork-spin 0.7s linear infinite;
}

.scene-field-suggestion-box {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0) 52%),
    rgba(246, 249, 255, 0.88);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}

.scene-field-suggestion-text {
  font-size: 0.8rem;
  line-height: 1.55;
  color: color-mix(in oklch, var(--ink) 88%, var(--accent-strong));
}

.scene-field-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scene-field-suggestion-pill {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
  font-size: 0.75rem;
}

.scene-field-suggestion-pill.is-active {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-strong);
}

.scene-field-textarea {
  resize: none;
  overflow: hidden;
  min-height: 42px;
}

.choice-field {
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

.choice-field legend {
  padding: 0;
  margin-bottom: 2px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.field-label.is-required {
  color: var(--accent-strong);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background: var(--panel-strong);
  padding: 13px 15px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238090ad' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-position: calc(100% - 18px) 50%;
  background-size: 12px 8px;
  background-repeat: no-repeat;
}

.field select option:disabled {
  color: color-mix(in oklch, var(--muted) 78%, white);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.custom-select-shell.is-open .custom-select-trigger,
.custom-select-trigger:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.44);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.12);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.65;
}

#style-map-prompt {
  min-height: 64px;
}

.native-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.custom-select-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.custom-select-trigger {
  width: 100%;
  min-height: 51px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background: var(--panel-strong);
  padding: 13px 15px;
  outline: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.custom-select-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-caret {
  flex: 0 0 auto;
  color: color-mix(in oklch, var(--muted) 82%, var(--ink));
  transition: transform 140ms ease;
}

.custom-select-caret .icon-svg {
  width: 12px;
  height: 8px;
  display: block;
}

.custom-select-shell.is-open .custom-select-caret {
  transform: rotate(180deg);
}

.custom-select-shell.is-disabled .custom-select-trigger,
.custom-select-trigger:disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: min(280px, 42vh);
  padding: 6px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.94));
  box-shadow: 0 18px 36px rgba(44, 71, 122, 0.14);
  backdrop-filter: blur(18px);
  overflow: auto;
}

.custom-select-option {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.custom-select-option:hover:not(:disabled),
.custom-select-option:focus-visible {
  background: color-mix(in oklch, white 82%, rgba(var(--accent-rgb), 0.08));
  outline: none;
}

.custom-select-option.is-selected {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(255, 255, 255, 0.86));
  color: var(--accent-strong);
}

.custom-select-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.custom-select-option-check {
  opacity: 0;
  color: inherit;
}

.custom-select-option.is-selected .custom-select-option-check {
  opacity: 1;
}

.custom-select-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.field-select select,
.field-select .custom-select-trigger,
.custom-select-shell.is-compact .custom-select-trigger {
  min-height: 51px;
}

.scene-multi-select select {
  min-height: 92px;
  padding: 8px;
  background-image: none;
}

.scene-multi-select option {
  padding: 8px 10px;
}

.scene-multi-select {
  gap: 10px;
}

.scene-multi-select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.scene-multi-select-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 1px;
  border: 0;
  background: transparent;
  color: color-mix(in oklch, var(--muted) 82%, var(--ink));
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}

.scene-multi-select-clear {
  min-height: 24px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}

.scene-multi-select-clear:hover,
.scene-multi-select-clear:focus-visible {
  color: var(--accent-strong);
  outline: none;
}

.scene-multi-select-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.scene-multi-select-option {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  background: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.scene-multi-select-option:hover {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent-strong);
}

.scene-multi-select-option:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.12);
}

.scene-multi-select-option.is-selected {
  border-color: rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-strong);
  box-shadow: none;
}

.scene-multi-select-option:disabled {
  opacity: 0.56;
  cursor: default;
}

.scene-multi-select-option-label {
  line-height: 1.2;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.scene-multi-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.schema-list {
  display: grid;
  gap: 12px;
}

.schema-card {
  display: grid;
  gap: 12px;
  padding: 16px 16px 18px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(244, 248, 255, 0.54)),
    rgba(255, 255, 255, 0.4);
}

.schema-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.schema-card-index {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.schema-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.schema-card-row-primary {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.schema-card-row-routing {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.6fr);
  align-items: end;
}

.schema-card-row-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scene-field-detail-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scene-field-detail-row.has-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.schema-card-row-quaternary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.schema-card-row-quaternary > :nth-child(2) {
  grid-column: span 2;
}

.schema-card .field input,
.schema-card .field select,
.schema-card .field .custom-select-trigger {
  min-height: 51px;
  height: 51px;
}

.schema-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-form,
.settings-primary-fields,
.parameter-template-head {
  display: grid;
  gap: 12px;
  align-content: start;
}

.settings-note {
  margin-top: -6px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.settings-primary-fields {
  grid-template-columns: minmax(260px, 0.62fr);
}

.parameter-template-head {
  grid-template-columns: minmax(0, 1fr);
}

.style-source-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.style-source-stat {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid rgba(124, 145, 198, 0.12);
  border-bottom: 1px solid rgba(124, 145, 198, 0.12);
}

.style-source-stat span {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  color: var(--accent-strong);
}

.style-source-stat small {
  color: var(--muted);
}

.style-source-stat.is-warning span {
  color: color-mix(in oklch, var(--warning) 76%, black);
}

.style-source-repo-link {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  color: var(--accent-strong);
  overflow-wrap: anywhere;
}

.model-parameter-panel {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.scene-default-card {
  display: grid;
  gap: 0;
  padding: 14px 16px 16px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(244, 248, 255, 0.54)),
    rgba(255, 255, 255, 0.4);
}

.scene-default-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scene-default-config-stack {
  display: grid;
  gap: 12px;
}

.scene-default-model-block {
  display: grid;
  gap: 8px;
}

.scene-default-config-field {
  gap: 8px;
  margin: 0;
}

.scene-default-subsection {
  display: grid;
  gap: 10px;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.scene-default-field-head > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.scene-default-field-head .ghost-btn {
  min-height: 32px;
  padding: 0 10px;
}

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

.model-parameter-grid .field {
  gap: 5px;
}

.model-parameter-grid .field > span {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.model-parameter-grid .field input,
.model-parameter-grid .field select,
.model-parameter-grid .field .custom-select-trigger,
.model-parameter-grid .field textarea {
  min-height: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.model-parameter-field textarea {
  min-height: 42px;
}

.model-capability-group {
  padding-top: 14px;
}

.model-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.model-capability-stack {
  display: grid;
  gap: 10px;
  align-content: start;
}

.capability-toggle {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
}

.capability-toggle input {
  inline-size: 18px;
  block-size: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: rgb(var(--accent-rgb));
}

.capability-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-toggle-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.capability-toggle-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-toggle-copy small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.2;
}

.capability-toggle:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-strong);
}

.capability-toggle-child {
  min-height: 44px;
  margin-left: 18px;
  border-style: dashed;
  border-color: rgba(124, 145, 198, 0.16);
  background: rgba(124, 145, 198, 0.04);
}

.capability-toggle-child.is-disabled {
  opacity: 0.56;
}

.capability-toggle:has(input:disabled) {
  color: var(--muted);
  background: rgba(124, 145, 198, 0.08);
}

.auto-rule-targets {
  gap: 10px;
}

.auto-rule-source-note {
  margin-top: -2px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.auto-rule-target-note {
  margin-top: -2px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.auto-rule-target-list {
  display: grid;
  gap: 8px;
  min-height: 51px;
  padding: 10px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background: var(--panel-strong);
}

.auto-rule-target-option {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 44px 0 12px;
  border: 1px solid rgba(124, 145, 198, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.auto-rule-target-option input {
  inline-size: 16px;
  block-size: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: rgb(var(--accent-rgb));
}

.auto-rule-target-option span {
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.auto-rule-target-lock {
  position: absolute;
  inset: 50% 10px auto auto;
  inline-size: 28px;
  block-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--muted);
  opacity: 0;
  transform: translateY(-50%) scale(0.92);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    color 140ms ease,
    background 140ms ease;
}

.auto-rule-target-option.is-selected:hover .auto-rule-target-lock,
.auto-rule-target-option.is-selected:focus-within .auto-rule-target-lock,
.auto-rule-target-lock.is-active {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.auto-rule-target-lock:hover,
.auto-rule-target-lock:focus-visible,
.auto-rule-target-lock.is-active {
  color: var(--accent-strong);
  background: rgba(var(--accent-rgb), 0.12);
}

.auto-rule-target-lock iconify-icon {
  font-size: 15px;
}

.auto-rule-target-option:hover {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.04);
}

.auto-rule-target-option:has(input:focus-visible) {
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.12);
}

.auto-rule-target-option.is-selected,
.auto-rule-target-option:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.26);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-strong);
}

.auto-rule-target-option.is-disabled,
.auto-rule-target-option:has(input:disabled) {
  opacity: 0.56;
  color: var(--muted);
  background: rgba(124, 145, 198, 0.08);
}

.auto-rule-target-empty {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 2px;
  color: var(--muted);
  font-size: 0.84rem;
}

.toggle-field {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
}

.toggle-field input {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

.toggle-field input,
.mini-check input,
.schema-card-check-control input {
  accent-color: rgb(var(--accent-rgb));
}

.parameter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.schema-card-note {
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.schema-subsection {
  display: grid;
  gap: 14px;
}

.auto-rule-card {
  gap: 10px;
}

.auto-rule-card .schema-card-head {
  align-items: flex-start;
}

.auto-rule-enable-toggle {
  min-height: 34px;
  padding: 0 10px;
}

.mini-check {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.schema-card-check-field {
  gap: 8px;
}

.schema-card-check-field > .schema-card-check-control {
  display: inline-flex;
}

.schema-card-check-control {
  min-height: 51px;
  height: 51px;
  align-items: center;
  width: 100%;
  padding: 0 14px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
}

.boolean-default-control {
  gap: 10px;
  justify-content: flex-start;
}

.boolean-default-label {
  font-size: 0.94rem;
  color: inherit;
}

.schema-card-check-control input {
  inline-size: 18px;
  block-size: 18px;
}

.schema-card-check-control:has(input:disabled) {
  color: var(--muted);
  background: rgba(124, 145, 198, 0.08);
}

.template-canvas-margin-exposed-field {
  gap: 10px;
}

.template-canvas-margin-exposed-field > span:first-child {
  color: var(--accent-strong);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.template-canvas-margin-exposed-control {
  justify-content: flex-start;
}

.template-canvas-subsection {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(124, 145, 198, 0.12);
}

.template-canvas-subsection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
}

.template-canvas-subsection-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.template-canvas-subsection-copy strong {
  color: var(--accent-strong);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.template-canvas-subsection-copy span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.template-canvas-subsection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-canvas-aspect-placeholder {
  min-height: 0;
  visibility: hidden;
  pointer-events: none;
}

.template-canvas-aspect-row {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  align-items: start;
}

.schema-card-placeholder {
  min-width: 0;
}

.template-definition-background-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}

.template-definition-background-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
}

.template-definition-background-item.is-active {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.92));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.14);
}

.template-definition-background-preview {
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(226, 233, 245, 0.72);
  cursor: pointer;
}

.template-definition-background-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.template-definition-background-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.template-definition-background-meta strong,
.template-definition-background-meta small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-definition-background-meta small {
  color: var(--muted);
}

.settings-group {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(124, 145, 198, 0.12);
}

.settings-group-title {
  color: var(--accent-strong);
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

.mockup-entry-card {
  width: 100%;
  min-height: 112px;
  padding: 18px 20px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 248, 255, 0.62)),
    rgba(255, 255, 255, 0.56);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
}

.mockup-entry-copy {
  display: grid;
  gap: 6px;
}

.mockup-entry-title {
  font-size: 1.04rem;
  color: var(--accent-strong);
}

.mockup-entry-meta {
  color: var(--muted);
  line-height: 1.45;
}

.mockup-entry-action {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(255, 255, 255, 0.84);
  color: var(--accent-strong);
}

.style-map-entry-card {
  min-height: 122px;
  background:
    linear-gradient(135deg, rgba(27, 170, 206, 0.12), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 84% 24%, rgba(27, 170, 206, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(241, 247, 250, 0.72)),
    rgba(255, 255, 255, 0.58);
}

.style-map-dialog,
.style-map-marker-style-dialog {
  width: min(1560px, calc(100vw - 36px));
  max-width: 1560px;
  height: calc(100vh - 36px);
  max-height: calc(100vh - 36px);
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.style-map-dialog::backdrop,
.style-map-marker-style-dialog::backdrop {
  background: rgba(238, 244, 255, 0.34);
  backdrop-filter: blur(10px);
}

.style-map-dialog-card,
.style-map-marker-style-dialog-card {
  border: 1px solid rgba(124, 145, 198, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--panel));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.style-map-marker-style-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(720px, calc(100vw - 36px));
  max-width: min(720px, calc(100vw - 36px));
  height: auto;
  max-height: calc(100vh - 36px);
  margin: 0;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.style-map-marker-style-dialog-card {
  height: auto;
  max-height: calc(100vh - 36px);
  overflow: hidden;
}

.style-map-marker-style-dialog-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
}

.style-map-dialog-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(280px, 340px);
  gap: 20px;
  min-height: 0;
  height: 100%;
  align-items: stretch;
}

.style-map-control-panel,
.style-map-preview-panel,
.style-map-settings-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 250, 255, 0.66)),
    rgba(255, 255, 255, 0.4);
}

.style-map-control-panel,
.style-map-settings-panel {
  padding: 18px;
  overflow: hidden;
}

.style-map-control-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
}

.style-map-panel-body {
  display: grid;
  align-content: start;
  gap: 14px;
}

.style-map-settings-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
}

.style-map-control-scroll,
.style-map-settings-scroll {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.style-map-primary-actions {
  justify-content: flex-start;
}

.style-map-note-strip {
  padding: 12px 14px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.style-map-preview-panel {
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(124, 145, 198, 0.1), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(90, 170, 206, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(244, 248, 255, 0.92), rgba(232, 239, 249, 0.82));
}

.style-map-preview-shell {
  --style-map-preview-base-width: 645px;
  --style-map-preview-base-height: 860px;
  --style-map-preview-scale: 1;
  position: relative;
  width: calc(var(--style-map-preview-base-width) * var(--style-map-preview-scale));
  height: calc(var(--style-map-preview-base-height) * var(--style-map-preview-scale));
  aspect-ratio: var(--style-map-preview-aspect-ratio, 3 / 4);
  justify-self: center;
  overflow: visible;
  flex: 0 0 auto;
}

.style-map-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--style-map-preview-base-width);
  height: var(--style-map-preview-base-height);
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  transform: translate(-50%, -50%) scale(var(--style-map-preview-scale));
  transform-origin: center;
  will-change: transform;
}

.style-map-poster {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
}

.style-map-poster-frame {
  --style-map-frame-background: linear-gradient(180deg, #f5f1e8 0%, #ece6db 100%);
  --style-map-card-background: rgba(255, 251, 245, 0.9);
  --style-map-title-color: #26211c;
  --style-map-subtitle-color: rgba(58, 49, 42, 0.78);
  --style-map-accent-color: #a67c52;
  --style-map-outline-color: rgba(51, 40, 30, 0.16);
  --style-map-canvas-margin: 38px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(10px, 2.3%, 20px);
  padding: var(--style-map-canvas-margin);
  background: var(--style-map-frame-background);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    0 28px 60px rgba(44, 71, 122, 0.12);
}

.style-map-map-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--style-map-outline-color);
  background: var(--style-map-card-background);
}

.style-map-map-view,
.style-map-map-stage .maplibregl-map,
.style-map-map-stage .maplibregl-canvas-container,
.style-map-map-stage .maplibregl-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.style-map-map-stage .maplibregl-ctrl-top-right {
  display: none !important;
}

.style-map-map-stage .maplibregl-ctrl-group {
  border: 1px solid rgba(124, 145, 198, 0.16);
  box-shadow: none;
}

.style-map-map-stage .maplibregl-ctrl-attrib,
.style-map-map-stage .maplibregl-attrib-button {
  display: none !important;
}

.style-map-map-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

.style-map-marker-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.style-map-marker-label {
  position: absolute;
  left: var(--style-map-marker-x);
  top: var(--style-map-marker-y);
  color: var(--style-map-marker-color);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.2;
}

/* Anchor icon: a teardrop pin fused to the exact coordinate, no connector line. Used by
   solid/outline/flag; pin (引线) keeps its original dot + leader line, defined further below. */
.style-map-marker-anchor {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  transform: translate(0, -100%);
  pointer-events: none;
}

.style-map-marker-label.is-left .style-map-marker-anchor {
  left: auto;
  right: 0;
}

.style-map-marker-label.is-below .style-map-marker-anchor {
  transform: translate(0, 0);
}

.style-map-marker-anchor-pin {
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  border-radius: 14px 14px 2px 14px;
  background: var(--style-map-marker-dot);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 4px 10px rgba(15, 23, 42, 0.26);
}

.style-map-marker-label.is-below .style-map-marker-anchor-pin {
  transform: rotate(225deg);
}

.style-map-marker-anchor-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #fff;
  transform: translate(-50%, -50%);
}

.style-map-marker-pill {
  position: absolute;
  left: 18px;
  top: -7px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  padding: 6px 9px;
  background: var(--style-map-marker-background);
  border: 1px solid var(--style-map-marker-border);
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
  white-space: nowrap;
}

.style-map-marker-label.is-left .style-map-marker-pill {
  left: auto;
  right: 18px;
}

.style-map-marker-label.is-solid .style-map-marker-pill {
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow:
    0 13px 28px rgba(15, 23, 42, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.style-map-marker-label.is-outline .style-map-marker-anchor-pin {
  background: transparent;
  border: 2px solid var(--style-map-marker-dot);
  box-sizing: border-box;
}

.style-map-marker-label.is-outline .style-map-marker-anchor-core {
  background: var(--style-map-marker-dot);
}

.style-map-marker-label.is-outline .style-map-marker-pill {
  padding: 7px 10px 8px;
  background: color-mix(in oklch, var(--style-map-marker-background) 72%, transparent);
  border-style: double;
  border-width: 3px;
  border-radius: 3px;
  box-shadow: 0 9px 18px rgba(15, 23, 42, 0.08);
}

.style-map-marker-label.is-flag .style-map-marker-anchor::before {
  content: '';
  position: absolute;
  left: 1px;
  top: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 6px;
  border-color: transparent transparent transparent var(--style-map-marker-dot);
}

.style-map-marker-label.is-flag.is-below .style-map-marker-anchor::before {
  top: auto;
  bottom: -6px;
  border-width: 3px 6px 3px 0;
  border-color: transparent var(--style-map-marker-dot) transparent transparent;
}

.style-map-marker-label.is-flag .style-map-marker-pill {
  padding: 7px 12px 7px 12px;
  border-radius: 2px 7px 7px 2px;
  box-shadow:
    5px 5px 0 color-mix(in oklch, var(--style-map-marker-background) 28%, transparent),
    0 12px 22px rgba(97, 38, 26, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.style-map-marker-label.is-flag .style-map-marker-pill::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 9px;
  height: 9px;
  background: color-mix(in oklch, var(--style-map-marker-background) 72%, white);
  border-left: 1px solid color-mix(in oklch, var(--style-map-marker-border) 74%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--style-map-marker-border) 74%, transparent);
  border-radius: 0 7px 0 2px;
}

/* 引线 (leader-line) style: unchanged — dot at the point, thin connector, floating pill. */
.style-map-marker-label.is-pin {
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: min(220px, calc(100% - 24px));
  padding: 3px 0 5px;
  color: var(--style-map-marker-color);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.2;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--style-map-marker-border);
  border-radius: 0;
  box-shadow: none;
  transform: translate(44px, -50%);
  white-space: nowrap;
}

.style-map-marker-label.is-pin::after {
  content: '';
  position: absolute;
  left: -42px;
  top: 50%;
  bottom: auto;
  width: 38px;
  height: 1px;
  background: var(--style-map-marker-dot);
  opacity: 0.82;
}

.style-map-marker-label.is-pin .style-map-marker-label-dot {
  position: absolute;
  left: -51px;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--style-map-marker-dot) 18%, transparent);
}

.style-map-marker-label.is-pin.is-left {
  transform: translate(calc(-100% - 44px), -50%);
}

.style-map-marker-label.is-pin.is-left::after {
  right: -42px;
  left: auto;
}

.style-map-marker-label.is-pin.is-left .style-map-marker-label-dot {
  right: -51px;
  left: auto;
}

.style-map-marker-label.is-pin.is-below,
.style-map-marker-label.is-pin.is-left.is-below {
  transform: translate(44px, -50%);
}

.style-map-marker-label.is-pin.is-left.is-below {
  transform: translate(calc(-100% - 44px), -50%);
}

.style-map-marker-label-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--style-map-marker-dot);
}

.style-map-marker-label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style-map-poster-copy {
  display: grid;
  gap: 6px;
}

.style-map-poster-gps,
.style-map-poster-credit,
.style-map-view-status {
  color: var(--style-map-subtitle-color);
}

.style-map-poster-gps {
  font-size: clamp(0.68rem, 2.2cqw, 0.92rem);
  letter-spacing: 0.06em;
}

.style-map-poster-credit {
  font-size: clamp(0.58rem, 1.85cqw, 0.78rem);
  letter-spacing: 0.04em;
}

.style-map-location-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.style-map-marker-field {
  gap: 10px;
}

.style-map-marker-style-grid {
  position: relative;
  display: grid;
  gap: 8px;
}

.style-map-marker-style-current {
  min-width: 0;
}

.style-map-marker-style-current .style-map-marker-style-chip {
  width: 100%;
  min-height: 44px;
  justify-content: space-between;
  font-size: 0.88rem;
}

.style-map-marker-style-grid-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.style-map-marker-style-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(124, 145, 198, 0.16);
  border-radius: 6px;
  cursor: pointer;
}

.style-map-marker-style-chip.is-current > .style-map-marker-style-label {
  margin-right: auto;
}

.style-map-marker-style-chip.is-current > .style-map-marker-style-action-icon {
  margin-right: 0;
  font-size: 1.1rem;
  color: var(--muted);
}

.style-map-marker-style-chip.is-active {
  border-color: color-mix(in oklch, var(--accent) 42%, rgba(124, 145, 198, 0.22));
  background: color-mix(in oklch, var(--accent) 9%, white);
}

.style-map-marker-style-swatch {
  position: relative;
  width: 24px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--style-map-marker-preview-background);
  border: 1px solid var(--style-map-marker-preview-border);
  box-shadow: inset 5px 0 0 var(--style-map-marker-preview-dot);
}

.style-map-marker-style-chip.is-solid .style-map-marker-style-swatch {
  width: 26px;
  border-radius: 999px;
  box-shadow: inset 7px 0 0 var(--style-map-marker-preview-dot);
}

.style-map-marker-style-chip.is-outline .style-map-marker-style-swatch {
  background: transparent;
  border-width: 2px;
  border-style: double;
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--style-map-marker-preview-dot) 24%, transparent);
}

.style-map-marker-style-chip.is-flag .style-map-marker-style-swatch {
  width: 28px;
  border-radius: 2px 5px 5px 2px;
  clip-path: none;
  box-shadow:
    3px 3px 0 color-mix(in oklch, var(--style-map-marker-preview-background) 28%, transparent),
    inset 4px 0 0 var(--style-map-marker-preview-dot);
}

.style-map-marker-style-chip.is-flag .style-map-marker-style-swatch::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 0;
  width: 6px;
  height: 6px;
  background: color-mix(in oklch, var(--style-map-marker-preview-background) 72%, white);
  border-radius: 0 4px 0 2px;
}

.style-map-marker-style-chip.is-pin .style-map-marker-style-swatch {
  width: 30px;
  height: 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--style-map-marker-preview-border);
  border-radius: 0;
  box-shadow: none;
}

.style-map-marker-style-chip.is-pin .style-map-marker-style-swatch::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--style-map-marker-preview-dot);
}

.style-map-marker-list {
  display: grid;
  gap: 7px;
}

.style-map-marker-color-grid {
  display: grid;
  gap: 10px;
}

.style-map-marker-color-control {
  padding: 10px 12px;
}

.style-map-marker-color-reset {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(124, 145, 198, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-size: 0.76rem;
}

.style-map-marker-color-reset:not(:disabled) {
  color: var(--accent-strong);
}

.style-map-marker-color-reset:disabled {
  opacity: 0.46;
  cursor: default;
}

.style-map-marker-empty,
.style-map-marker-list-item {
  min-height: 34px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.style-map-marker-empty {
  display: flex;
  align-items: center;
  padding: 7px 9px;
  border: 1px dashed rgba(124, 145, 198, 0.18);
  border-radius: 6px;
}

.style-map-marker-list-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(124, 145, 198, 0.13);
  border-radius: 6px;
}

.style-map-marker-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #fffdf6;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  border-radius: 50%;
  background: #6a7f59;
}

.style-map-marker-status.is-failed {
  background: #a44735;
}

.style-map-marker-status.is-out-of-view {
  background: #9c7a32;
}

.style-map-marker-list-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-map-marker-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.style-map-marker-remove:hover {
  color: #a44735;
  background: rgba(164, 71, 53, 0.08);
}

.style-map-control-footer,
.style-map-settings-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(124, 145, 198, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 250, 255, 0.94)),
    rgba(255, 255, 255, 0.72);
}

.style-map-map-status {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

#btn-style-map-load-overpass:disabled {
  color: color-mix(in oklch, var(--muted) 76%, white);
  border-color: rgba(124, 145, 198, 0.08);
  background:
    linear-gradient(180deg, rgba(244, 247, 252, 0.82), rgba(236, 241, 248, 0.74));
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.58;
}

.style-map-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.style-map-primary-actions {
  justify-content: flex-start;
}

#style-map-map-style-controls {
  display: grid;
  gap: 16px;
}

.style-map-map-style-stack {
  display: grid;
  gap: 10px;
}

.style-map-canvas-margin-field {
  margin-top: 10px;
}

.style-map-control-range {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.style-map-color-control {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

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

.style-map-color-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.style-map-color-control-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.style-map-current-color-btn,
.style-map-custom-color-trigger {
  --style-map-current-color: #111111;
}

.style-map-current-color-btn {
  min-width: 40px;
  min-height: 40px;
  justify-content: center;
  padding: 0;
}

.style-map-current-color-btn .mockup-border-color-chip-swatch,
.style-map-custom-color-trigger .mockup-border-color-chip-swatch,
.style-map-color-swatch-row .mockup-border-color-chip .mockup-border-color-chip-swatch {
  border-radius: 4px;
}

.style-map-color-picker-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 120;
  width: min(320px, calc(100vw - 72px));
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96)),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 40px rgba(31, 41, 65, 0.14);
}

.style-map-color-picker-panel.is-floating {
  position: fixed;
  z-index: 1400;
  right: auto;
  bottom: auto;
}

.style-map-marker-style-dialog .style-map-color-picker-panel.is-floating {
  position: fixed;
  z-index: 1600;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
}

.style-map-marker-color-picker-portal {
  position: fixed;
  inset: 0;
  z-index: 1800;
  pointer-events: none;
}

.style-map-marker-color-picker-portal-panel {
  position: fixed;
  z-index: 1;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  pointer-events: auto;
}

.style-map-color-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.style-map-custom-color-trigger {
  position: relative;
  gap: 8px;
  padding: 0 12px;
}

.style-map-color-swatch-row .mockup-border-color-chip.is-active {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

[data-style-map-colorjoe],
[data-style-map-marker-colorjoe] {
  min-width: 0;
  padding-top: 4px;
}

[data-style-map-colorjoe].colorPicker,
[data-style-map-marker-colorjoe].colorPicker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

[data-style-map-colorjoe].colorPicker .twod,
[data-style-map-colorjoe].colorPicker .oned,
[data-style-map-marker-colorjoe].colorPicker .twod,
[data-style-map-marker-colorjoe].colorPicker .oned {
  float: none;
  margin: 0;
}

[data-style-map-colorjoe].colorPicker .twod,
[data-style-map-colorjoe].colorPicker .twod .bg,
[data-style-map-marker-colorjoe].colorPicker .twod,
[data-style-map-marker-colorjoe].colorPicker .twod .bg {
  width: 100%;
  height: 236px;
}

[data-style-map-colorjoe].colorPicker .twod,
[data-style-map-marker-colorjoe].colorPicker .twod {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(124, 145, 198, 0.16);
}

[data-style-map-colorjoe].colorPicker .oned,
[data-style-map-colorjoe].colorPicker .oned .bg,
[data-style-map-colorjoe].colorPicker .oned .pointer .shape,
[data-style-map-marker-colorjoe].colorPicker .oned,
[data-style-map-marker-colorjoe].colorPicker .oned .bg,
[data-style-map-marker-colorjoe].colorPicker .oned .pointer .shape {
  width: 24px;
}

[data-style-map-colorjoe].colorPicker .oned .pointer .shape,
[data-style-map-marker-colorjoe].colorPicker .oned .pointer .shape {
  left: 50%;
  margin-left: 0;
  transform: translateX(-50%);
}

[data-style-map-colorjoe].colorPicker .oned,
[data-style-map-colorjoe].colorPicker .oned .bg,
[data-style-map-marker-colorjoe].colorPicker .oned,
[data-style-map-marker-colorjoe].colorPicker .oned .bg {
  height: 236px;
}

[data-style-map-colorjoe].colorPicker .oned .bg,
[data-style-map-marker-colorjoe].colorPicker .oned .bg {
  border-color: rgba(124, 145, 198, 0.18);
}

.style-map-custom-color-error {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: #b42318;
  font-size: 0.82rem;
}

.style-map-theme-grid {
  display: grid;
  gap: 10px;
}

.style-map-control-panel .style-map-theme-grid {
  gap: 8px;
}

.style-map-theme-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.76);
  display: grid;
  gap: 4px;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.style-map-theme-card strong {
  color: var(--accent-strong);
  font-size: 0.92rem;
}

.style-map-theme-card span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.style-map-theme-card.is-active {
  border-color: rgba(var(--accent-rgb), 0.26);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.92)),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

.model-settings-list,
.style-source-settings-list {
  gap: 8px;
  border-top: 0;
  min-height: 0;
  align-content: start;
}

.model-setting-row,
.parameter-template-row,
.style-source-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
  position: relative;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.model-setting-row:not(.is-active):hover,
.parameter-template-row:not(.is-active):hover,
.style-source-setting-row:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.model-setting-main,
.parameter-template-main,
.style-source-setting-main {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  gap: 4px;
  text-align: left;
  grid-column: 1 / -1;
}

.model-setting-main:focus-visible,
.parameter-template-main:focus-visible,
.style-source-setting-main:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.5);
  outline-offset: 3px;
}

.model-setting-title {
  font-size: 0.92rem;
  font-weight: 690;
  line-height: 1.28;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-setting-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.model-setting-meta,
.model-setting-source {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-setting-source {
  font-size: 0.82rem;
}

.model-setting-status.is-warning {
  border-color: color-mix(in oklch, var(--warning) 30%, white);
  color: color-mix(in oklch, var(--warning) 76%, black);
  background: color-mix(in oklch, var(--warning) 10%, white);
}

.model-setting-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 999px;
  color: color-mix(in oklch, var(--accent-strong) 68%, var(--muted));
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.74rem;
}

.model-setting-specs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in oklch, var(--muted) 86%, var(--ink));
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
}

.model-setting-specs span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-setting-specs span + span {
  flex: 0 0 auto;
  color: color-mix(in oklch, var(--accent-strong) 70%, var(--muted));
}

.model-setting-row.is-active,
.parameter-template-row.is-active,
.style-source-setting-row.is-active {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.84)),
    rgba(255, 255, 255, 0.84);
  border-color: rgba(var(--accent-rgb), 0.24);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

.model-setting-row.is-active .model-setting-title,
.parameter-template-row.is-active .model-setting-title,
.style-source-setting-row.is-active .model-setting-title {
  color: var(--accent-strong);
}

.style-source-setting-row-stock {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.style-source-inline-toggle {
  flex: 0 0 auto;
  align-self: center;
}

.scene-editor-top {
  display: block;
  min-height: auto;
  margin-bottom: 18px;
}

.scene-editor-section {
  display: grid;
  gap: 16px;
  min-height: auto;
}

.schema-panel {
  margin-top: 0;
  margin-bottom: 0;
}

.scene-editor-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: clamp(78px, 9vh, 92px);
}

.scene-editor-meta,
.schema-panel {
  display: grid;
  gap: 14px;
}

.scene-editor-head {
  z-index: 4;
  padding-bottom: 12px;
  align-self: start;
  background: transparent;
}

.scene-editor-drawer-head-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.scene-editor-meta {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(124, 145, 198, 0.12);
}

.scene-editor-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(18px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 -8px 24px rgba(44, 71, 122, 0.04);
}

.scene-editor-footer-with-feedback {
  align-items: end;
}

.scene-editor-footer-feedback-shell {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: end;
}

.scene-editor-footer-feedback {
  max-width: min(440px, 48vw);
}

.scene-editor-footer-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.scene-editor-footer .danger-btn,
.scene-editor-footer .solid-btn {
  min-width: 132px;
  justify-content: center;
}

.selection-strip,
.reference-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.selected-style-card,
.reference-card {
  display: grid;
  gap: 8px;
  position: relative;
  min-width: 0;
}

.selected-style-card {
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}

.selected-style-card.is-busy .selected-style-thumb {
  opacity: 0.72;
}

.scene-default-style-strip {
  grid-template-columns: minmax(0, 1fr);
}

.scene-default-style-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  padding-right: 92px;
}

.scene-default-style-thumb {
  inline-size: min(88px, 100%);
  block-size: 88px;
  aspect-ratio: auto;
  flex-shrink: 0;
}

.scene-editor-style-selection {
  display: grid;
  gap: 8px;
}

.scene-default-style-block {
  padding-top: 12px;
  border-top: 1px solid rgba(124, 145, 198, 0.12);
}

.selected-style-status {
  position: absolute;
  left: 8px;
  top: 8px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(30, 43, 74, 0.8);
  color: white;
  font-size: 0.74rem;
  box-shadow: 0 8px 20px rgba(30, 43, 74, 0.14);
  z-index: 2;
}

.selected-style-thumb,
.reference-card-frame,
.style-card-frame,
.recent-card-frame {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(40, 215, 187, 0.08), rgba(255, 118, 94, 0.08));
}

.selected-style-thumb,
.reference-card-frame,
.style-card-frame {
  position: relative;
  aspect-ratio: 4 / 5;
}

.style-image-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-width: 28px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  color: white;
  background: rgba(30, 43, 74, 0.72);
  font-size: 0.78rem;
}

.reference-image-index {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 32px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  color: white;
  background: rgba(30, 43, 74, 0.72);
  box-shadow: 0 8px 20px rgba(30, 43, 74, 0.12);
  font-size: 0.78rem;
  line-height: 1;
}

.selected-style-thumb img,
.reference-card-frame img,
.style-card-frame img,
.recent-card-frame img,
.style-detail-image,
.result-detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.selected-style-title {
  font-size: 0.94rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scene-default-style-card .selected-style-title {
  white-space: normal;
  line-height: 1.35;
}

.scene-default-style-card .selected-style-remove {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.selected-style-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  color: color-mix(in oklch, var(--warning) 82%, black);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(30, 43, 74, 0.12);
  font-size: 0.76rem;
}

.reference-dropzone {
  display: grid;
  place-items: center;
  min-height: 118px;
  padding: 18px;
  border: 1px dashed rgba(var(--accent-rgb), 0.32);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(var(--accent-rgb), 0.06));
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.reference-dropzone-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.dropzone-title {
  font-family: var(--ui-font);
  font-size: 0.98rem;
  font-weight: 400;
}

.reference-dropzone-copy span,
.reference-card-meta span,
.style-card-copy span,
.recent-card-copy span,
.style-detail-empty span,
.result-detail-feedback {
  color: var(--muted);
}

.reference-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.reference-card-meta span {
  min-width: 0;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reference-card-meta .reference-remove {
  flex-shrink: 0;
}

.reference-remove,
.selected-style-remove,
.filter-chip {
  appearance: none;
}

.scene-clear-compose-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, white 88%, rgba(var(--accent-rgb), 0.07));
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.1);
  transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease;
  cursor: pointer;
}

.scene-clear-compose-btn:disabled {
  opacity: 0.42;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(124, 145, 198, 0.1);
  color: var(--muted);
}

.scene-clear-compose-btn:hover,
.scene-clear-compose-btn:focus-visible {
  background: color-mix(in oklch, white 78%, rgba(var(--accent-rgb), 0.14));
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.14),
    0 0 0 4px rgba(var(--accent-rgb), 0.08);
  outline: none;
}

.scene-clear-compose-btn .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}

.prompt-preview-shell {
  position: relative;
  display: grid;
  min-height: 0;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.prompt-preview {
  display: block;
  width: 100%;
  height: 100%;
  resize: none;
  margin: 0;
  min-height: 240px;
  max-height: 420px;
  overflow: auto;
  padding: 18px;
  border-radius: 4px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 246, 255, 0.86));
  color: color-mix(in oklch, var(--ink) 94%, white);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.68;
  white-space: pre-wrap;
  word-break: break-word;
}

.prompt-preview:focus {
  border-color: rgba(72, 103, 170, 0.42);
  outline: 2px solid rgba(72, 103, 170, 0.12);
  outline-offset: 0;
}

.prompt-panel .prompt-preview {
  min-height: calc(100vh - 248px);
  max-height: none;
}

.prompt-panel .prompt-preview-shell {
  min-height: calc(100vh - 248px);
}

.prompt-preview-shell.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0) 100%) -180% 0 / 42% 100% no-repeat,
    linear-gradient(180deg, rgba(246, 249, 255, 0.16), rgba(232, 238, 249, 0.22));
  animation: prompt-overlay-sweep 1.5s ease-in-out infinite;
  z-index: 2;
}

.prompt-preview-shell.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242, 246, 255, 0.18);
  backdrop-filter: saturate(0.92);
  z-index: 3;
}

.prompt-preview.is-replacing {
  animation: prompt-preview-refresh 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.prompt-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 10px;
}

.prompt-action-bar .action-row {
  justify-content: flex-end;
}

.action-row,
.result-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mockup-action-row {
  justify-content: flex-start;
  gap: 12px;
}

.mockup-action-row > .ghost-btn {
  flex: 0 0 auto;
}

.mockup-action-row > .mockup-icon-btn {
  margin-left: auto;
}

.mockup-icon-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklch, white 84%, rgba(var(--accent-rgb), 0.08));
  color: color-mix(in oklch, var(--accent-strong) 76%, var(--ink) 24%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.1);
  line-height: 1;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 140ms ease;
  cursor: pointer;
}

.mockup-icon-btn .material-symbols-outlined {
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  font-variation-settings: 'OPSZ' 20, 'wght' 300, 'FILL' 0, 'GRAD' 0;
}

.mockup-icon-btn:hover,
.mockup-icon-btn:focus-visible {
  outline: none;
  transform: translateY(-1px);
  background: color-mix(in oklch, white 74%, rgba(var(--accent-rgb), 0.12));
  color: var(--accent-strong);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.14),
    0 0 0 3px rgba(var(--accent-rgb), 0.06);
}

.mockup-icon-btn:disabled {
  opacity: 0.42;
  cursor: default;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(124, 145, 198, 0.1);
  color: var(--muted);
}

.mockup-icon-btn[hidden] {
  display: none !important;
}

.text-btn,
.text-link,
.ghost-btn,
.solid-btn,
.danger-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.text-btn,
.text-link {
  border: 0;
  background: transparent;
  color: var(--muted);
}

.ghost-btn,
.solid-btn,
.danger-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  background: rgba(255, 255, 255, 0.86);
}

.solid-btn {
  border-color: rgba(var(--accent-rgb), 0.38);
  color: oklch(0.28 0.03 255);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(40, 215, 187, 0.16));
}

.solid-btn:disabled {
  color: color-mix(in oklch, var(--muted) 84%, white);
  border-color: rgba(124, 145, 198, 0.14);
  background: linear-gradient(180deg, rgba(239, 243, 251, 0.96), rgba(231, 237, 247, 0.9));
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.ghost-btn[aria-disabled="true"] {
  opacity: 0.48;
  pointer-events: none;
}

.compose-panel .text-btn,
.compose-panel .ghost-btn {
  border-radius: 4px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 255, 0.88)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.04), rgba(40, 215, 187, 0.025));
  box-shadow: 0 6px 16px rgba(44, 71, 122, 0.04);
}

.compose-panel .text-btn {
  min-height: 36px;
  padding: 0 14px;
  color: color-mix(in oklch, var(--muted) 56%, var(--ink));
}

.compose-panel .ghost-btn {
  border-color: rgba(124, 145, 198, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.92)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), rgba(40, 215, 187, 0.03));
}

.compose-panel .text-btn:hover,
.compose-panel .text-btn:focus-visible,
.compose-panel .ghost-btn:hover,
.compose-panel .ghost-btn:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 255, 0.94)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(40, 215, 187, 0.04));
  box-shadow:
    0 10px 22px rgba(44, 71, 122, 0.06),
    0 0 0 4px rgba(var(--accent-rgb), 0.05);
}

.compose-panel .text-btn:disabled,
.compose-panel .ghost-btn:disabled,
.compose-panel .ghost-btn[aria-disabled="true"] {
  border-color: rgba(124, 145, 198, 0.1);
  background:
    linear-gradient(180deg, rgba(248, 250, 255, 0.94), rgba(242, 246, 252, 0.9));
  box-shadow: none;
}

.compose-panel .text-btn[id^="btn-clear"],
.compose-panel .text-btn.template-item-remove,
.compose-panel .text-btn[data-template-action^="clear-"],
.compose-panel .text-btn[data-template-action="remove-item"],
.compose-panel .text-btn[data-remove-custom-field],
.compose-panel .text-btn[data-auto-rule-action="delete"],
.compose-panel .text-btn[data-model-parameter-action="delete"] {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}

.compose-panel .text-btn[id^="btn-clear"]:hover,
.compose-panel .text-btn[id^="btn-clear"]:focus-visible,
.compose-panel .text-btn.template-item-remove:hover,
.compose-panel .text-btn.template-item-remove:focus-visible,
.compose-panel .text-btn[data-template-action^="clear-"]:hover,
.compose-panel .text-btn[data-template-action^="clear-"]:focus-visible,
.compose-panel .text-btn[data-template-action="remove-item"]:hover,
.compose-panel .text-btn[data-template-action="remove-item"]:focus-visible,
.compose-panel .text-btn[data-remove-custom-field]:hover,
.compose-panel .text-btn[data-remove-custom-field]:focus-visible,
.compose-panel .text-btn[data-auto-rule-action="delete"]:hover,
.compose-panel .text-btn[data-auto-rule-action="delete"]:focus-visible,
.compose-panel .text-btn[data-model-parameter-action="delete"]:hover,
.compose-panel .text-btn[data-model-parameter-action="delete"]:focus-visible {
  background: transparent;
  box-shadow: none;
  color: color-mix(in oklch, var(--warning) 70%, var(--ink) 30%);
}

.compose-panel .text-btn[id^="btn-clear"]:disabled,
.compose-panel .text-btn.template-item-remove:disabled,
.compose-panel .text-btn[data-template-action^="clear-"]:disabled,
.compose-panel .text-btn[data-template-action="remove-item"]:disabled,
.compose-panel .text-btn[data-remove-custom-field]:disabled,
.compose-panel .text-btn[data-auto-rule-action="delete"]:disabled,
.compose-panel .text-btn[data-model-parameter-action="delete"]:disabled {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.danger-btn {
  border-color: color-mix(in oklch, var(--warning) 34%, white);
  background: color-mix(in oklch, var(--warning) 8%, white);
}

.feedback-line {
  min-height: 0;
  height: 0;
  overflow: hidden;
  font-size: 0.92rem;
}

.feedback-line:not(:empty) {
  min-height: 1.6em;
  height: auto;
}

.feedback-line.is-error,
.result-detail-feedback.is-error,
.stage-meta.is-error {
  color: color-mix(in oklch, var(--warning) 76%, black);
}

#style-feedback:empty {
  display: none;
}

.text-btn.is-loading::before,
.ghost-btn.is-loading::before,
.solid-btn.is-loading::before,
.danger-btn.is-loading::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: artwork-spin 0.7s linear infinite;
}

.loading-surface {
  position: relative;
}

.loading-surface.is-loading {
  pointer-events: none;
  color: transparent;
  overflow: hidden;
}

.loading-surface.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0)) -160% 0 / 52% 100% no-repeat,
    var(--skeleton-layout, linear-gradient(180deg, rgba(124, 145, 198, 0.1), rgba(124, 145, 198, 0.06)));
  animation: artwork-skeleton 1.2s ease-in-out infinite;
  z-index: 2;
}

.loading-surface.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--skeleton-detail, transparent);
  z-index: 3;
}

.structured-form.is-loading {
  min-height: 190px;
  --skeleton-layout:
    linear-gradient(rgba(124, 145, 198, 0.18), rgba(124, 145, 198, 0.18)) 0 0 / calc(50% - 6px) 64px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 82px / calc(50% - 6px) 108px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.18), rgba(124, 145, 198, 0.18)) 100% 0 / calc(50% - 6px) 64px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 100% 82px / calc(50% - 6px) 108px no-repeat;
}

.prompt-preview.is-loading {
  --skeleton-layout:
    repeating-linear-gradient(
      180deg,
      rgba(124, 145, 198, 0.18) 0 12px,
      transparent 12px 28px
    );
}

.stage-canvas.is-loading {
  --skeleton-layout:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  --skeleton-detail:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)) 50% 45% / min(520px, 68%) min(380px, 62%) no-repeat;
}

.scene-library-list.is-loading {
  min-height: 360px;
  --skeleton-layout:
    repeating-linear-gradient(
      180deg,
      rgba(124, 145, 198, 0.18) 0 18px,
      transparent 18px 30px,
      rgba(124, 145, 198, 0.1) 30px 42px,
      transparent 42px 74px
    );
}

.schema-list.is-loading {
  min-height: min(280px, 100%);
  --skeleton-layout:
    repeating-linear-gradient(
      180deg,
      rgba(124, 145, 198, 0.16) 0 16px,
      transparent 16px 34px,
      rgba(124, 145, 198, 0.1) 34px 84px,
      transparent 84px 112px
    );
}

.schema-list.is-loading:not(:empty) {
  min-height: 0;
}

.style-source-settings-list.is-loading {
  min-height: 300px;
  --skeleton-layout:
    repeating-linear-gradient(
      180deg,
      rgba(124, 145, 198, 0.18) 0 18px,
      transparent 18px 30px,
      rgba(124, 145, 198, 0.1) 30px 44px,
      transparent 44px 82px
    );
}

.settings-form.is-loading {
  min-height: 630px;
  --skeleton-layout:
    linear-gradient(rgba(124, 145, 198, 0.18), rgba(124, 145, 198, 0.18)) 0 0 / 100% 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 82px / 88px 14px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 114px / calc((100% - 24px) / 3) 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 50% 114px / calc((100% - 24px) / 3) 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 100% 114px / calc((100% - 24px) / 3) 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 206px / 88px 14px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 0 238px / calc(50% - 6px) 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 100% 238px / calc(50% - 6px) 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 0 310px / calc((100% - 30px) / 4) 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 33.333% 310px / calc((100% - 30px) / 4) 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 66.666% 310px / calc((100% - 30px) / 4) 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 100% 310px / calc((100% - 30px) / 4) 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.1), rgba(124, 145, 198, 0.1)) 0 392px / 100% 46px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.1), rgba(124, 145, 198, 0.1)) 0 462px / 100% 168px no-repeat;
}

.style-source-drawer .settings-form.is-loading {
  min-height: 260px;
  --skeleton-layout:
    linear-gradient(rgba(124, 145, 198, 0.18), rgba(124, 145, 198, 0.18)) 0 0 / 100% 52px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 82px / calc((100% - 24px) / 3) 72px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 50% 82px / calc((100% - 24px) / 3) 72px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 100% 82px / calc((100% - 24px) / 3) 72px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.1), rgba(124, 145, 198, 0.1)) 0 190px / 100% 44px no-repeat;
}

.model-settings-list.is-loading {
  min-height: 420px;
  --skeleton-layout:
    repeating-linear-gradient(
      180deg,
      rgba(124, 145, 198, 0.18) 0 18px,
      transparent 18px 30px,
      rgba(124, 145, 198, 0.1) 30px 44px,
      transparent 44px 82px
    );
}

.style-grid.is-loading,
.recent-list.is-loading,
.style-picker-grid.is-loading {
  min-height: 520px;
  --skeleton-card-width: calc((100% - 64px) / 5);
  --skeleton-card-step: calc(var(--skeleton-card-width) + 16px);
  --skeleton-layout:
    repeating-linear-gradient(
      90deg,
      rgba(124, 145, 198, 0.14) 0 var(--skeleton-card-width),
      transparent var(--skeleton-card-width) var(--skeleton-card-step)
    );
  --skeleton-detail:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.42) 0 var(--skeleton-card-width),
      transparent var(--skeleton-card-width) var(--skeleton-card-step)
    ) 0 78% / 100% 22% no-repeat;
}

.style-picker-grid.is-loading {
  --skeleton-card-width: calc((100% - 48px) / 4);
}

.stage-panel {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100vh - 120px);
}

.stage-view-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  background: rgba(255, 255, 255, 0.64);
}

.stage-view-tab {
  appearance: none;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  transition: background 140ms ease, color 140ms ease;
}

.stage-view-tab.is-active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-strong);
}

.stage-view,
.prompt-panel {
  display: grid;
  min-height: 0;
}

.prompt-panel {
  gap: 14px;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}

.stage-view-output {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}

.stage-canvas {
  min-height: 0;
  height: 100%;
  padding: clamp(12px, 1.2vw, 18px);
  border-radius: 4px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(140deg, rgba(10, 28, 72, 0.92), rgba(26, 46, 96, 0.9), rgba(23, 71, 120, 0.92));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-empty,
.stage-image-trigger {
  width: min(100%, 1080px);
  max-height: 100%;
}

.stage-empty {
  display: grid;
  gap: 6px;
  justify-items: center;
  color: rgba(245, 249, 255, 0.88);
}

.stage-empty-title {
  font-size: clamp(1.12rem, 1.5vw, 1.36rem);
  letter-spacing: 0.04em;
}

.stage-image-trigger {
  display: block;
  width: min(100%, 1080px);
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  flex: 1 1 auto;
  align-self: stretch;
}

.stage-image-trigger > .stage-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.warning-stack {
  padding-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip,
.warning-chip,
.reference-remove {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid rgba(124, 145, 198, 0.16);
  background: rgba(255, 255, 255, 0.7);
}

.warning-chip {
  color: color-mix(in oklch, var(--warning) 84%, black);
  background: color-mix(in oklch, var(--warning) 12%, white);
}

.library-section,
.recent-section,
.style-picker-dialog,
.style-detail-dialog,
.result-detail-dialog {
  display: grid;
  gap: 16px;
}

.library-section {
  align-content: start;
  align-self: start;
  min-height: calc(100vh - 46px);
  height: calc(100vh - 46px);
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}

.page-view-results .library-section {
  grid-template-rows: none;
  align-content: start;
  align-self: stretch;
  min-height: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0;
  border-radius: 4px 4px 0 0;
}

.page-view-results .page-fixed-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

.page-view-results .page-scroll-region {
  overflow: visible;
  padding-right: 0;
}

.page-view-results .result-filter-row .field select,
.page-view-results .result-filter-row .field .custom-select-trigger {
  background-color: rgba(255, 255, 255, var(--result-filter-scroll-alpha));
  border-color: rgba(124, 145, 198, 0.12);
  transition: background-color 120ms linear, border-color 120ms linear, box-shadow 120ms linear;
}

.style-picker-toolbar {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.style-search-field {
  min-width: 0;
}

.style-search-shell {
  position: relative;
  display: block;
}

.style-search-field input {
  min-height: 42px;
  padding-right: 44px;
}

.style-search-clear {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklch, white 84%, rgba(var(--accent-rgb), 0.08));
  color: color-mix(in oklch, var(--accent-strong) 76%, var(--ink) 24%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.1);
  line-height: 1;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
  cursor: pointer;
}

.style-search-clear .material-symbols-outlined {
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  font-variation-settings: 'OPSZ' 20, 'wght' 300, 'FILL' 0, 'GRAD' 0;
}

.style-search-clear:hover {
  background: color-mix(in oklch, white 74%, rgba(var(--accent-rgb), 0.12));
  color: var(--accent-strong);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.14),
    0 0 0 3px rgba(var(--accent-rgb), 0.06);
}

.style-search-clear:focus-visible {
  outline: none;
  background: color-mix(in oklch, white 74%, rgba(var(--accent-rgb), 0.12));
  color: var(--accent-strong);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.16),
    0 0 0 4px rgba(var(--accent-rgb), 0.08);
}

.style-picker-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  overscroll-behavior: contain;
}

.style-reference-image-picker-dialog {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.style-reference-image-picker-copy {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
  padding: 2px 0 4px;
}

.style-reference-image-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.style-reference-image-picker-item {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.style-selection-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 30, 51, 0.34);
  color: rgba(255, 255, 255, 0.96);
  font-size: 1rem;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.filter-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}

.result-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 320px)) auto;
  gap: 10px;
  min-width: 0;
  justify-content: flex-start;
  align-items: center;
}

.result-filter-reset {
  justify-self: start;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease;
}

.result-filter-reset:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(var(--accent-rgb), 0.26);
}

.result-filter-reset:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.44);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.12);
  outline: none;
}

.filter-chip.is-active {
  border-color: rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-strong);
}

.style-grid,
.recent-list,
.style-picker-grid {
  display: grid;
  gap: 16px;
  align-content: start;
  align-self: start;
}

.style-grid,
.recent-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.style-grid-library {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.style-picker-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.style-card {
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  gap: 10px;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 280px;
}

.style-card-main {
  appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  gap: 10px;
  text-align: left;
}

.style-card.is-disabled {
  opacity: 0.72;
}

.style-card.is-selected .style-card-frame,
.recent-card.is-active .recent-card-frame {
  outline: 2px solid rgba(var(--accent-rgb), 0.42);
  outline-offset: -2px;
}

.style-card-copy,
.recent-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.style-card-title {
  font-size: 1rem;
}

.style-grid .style-card-copy > span {
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}

.style-picker-grid .style-card-copy > span {
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}

.recent-card-copy > .style-card-title {
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}

.style-preferred-label {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  color: color-mix(in oklch, var(--accent-strong) 84%, black);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(30, 43, 74, 0.12);
  font-size: 0.76rem;
  pointer-events: none;
}

.recent-card {
  gap: 10px;
}

.recent-card-frame {
  position: relative;
  aspect-ratio: 4 / 5;
}

.recent-card.is-pending .recent-card-frame {
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 251, 255, 0.24)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(40, 215, 187, 0.1), rgba(255, 118, 94, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.recent-card.is-pending .recent-card-frame.has-image img {
  filter: saturate(0.82) contrast(0.96);
}

.recent-card-pending-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 18px;
  color: color-mix(in oklch, var(--ink) 82%, var(--accent-strong));
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.56)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px,
      transparent 18px
    );
}

.recent-card-frame.has-image .recent-card-pending-state {
  color: white;
  background:
    linear-gradient(180deg, rgba(12, 25, 58, 0.1), rgba(12, 25, 58, 0.54)),
    rgba(12, 25, 58, 0.16);
}

.recent-card-pending-mark {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(var(--accent-rgb), 0.18);
  border-top-color: rgba(var(--accent-rgb), 0.68);
  background: rgba(255, 255, 255, 0.52);
  box-shadow:
    0 12px 32px rgba(30, 43, 74, 0.12),
    inset 0 0 0 8px rgba(255, 255, 255, 0.38);
  animation: result-pending-spin 1s linear infinite;
}

.recent-card-frame.has-image .recent-card-pending-mark {
  border-color: rgba(255, 255, 255, 0.28);
  border-top-color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.16),
    inset 0 0 0 8px rgba(255, 255, 255, 0.1);
}

.recent-card-pending-copy {
  display: grid;
  gap: 5px;
  justify-items: center;
  max-width: 100%;
}

.recent-card-pending-copy strong {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.2;
}

.recent-card-pending-copy span {
  max-width: 100%;
  color: currentColor;
  opacity: 0.68;
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@keyframes result-pending-spin {
  to {
    transform: rotate(360deg);
  }
}

.recent-card-title {
  font-size: 1rem;
}

.empty-block {
  min-height: 96px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(124, 145, 198, 0.22);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.32);
}

.style-picker,
.scene-init,
.required-fields-dialog,
.model-setting-drawer,
.style-source-drawer,
.parameter-template-drawer,
.style-detail,
.result-detail {
  border: 0;
  padding: 0;
  background: transparent;
}

.style-picker {
  width: min(1280px, calc(100vw - 40px));
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
  max-width: calc(100vw - 40px);
  overflow: hidden;
}

.scene-init {
  width: min(760px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  overflow: hidden;
}

.required-fields-dialog {
  width: min(520px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  overflow: hidden;
}

.scene-editor-drawer {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(980px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100vw;
  margin: 0 0 0 auto;
}

.template-scene-editor-drawer {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(980px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100vw;
  margin: 0 0 0 auto;
}

.model-setting-drawer,
.style-source-drawer,
.parameter-template-drawer {
  width: min(860px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100vw;
  margin: 0 0 0 auto;
}

.style-detail {
  width: min(1080px, calc(100vw - 40px));
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
  max-width: calc(100vw - 40px);
  overflow: hidden;
}

.result-detail {
  width: calc(100vw - 40px);
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
  max-width: calc(100vw - 40px);
}

.style-picker::backdrop,
.scene-init::backdrop,
.required-fields-dialog::backdrop,
.scene-editor-drawer::backdrop,
.template-scene-editor-drawer::backdrop,
.model-setting-drawer::backdrop,
.style-source-drawer::backdrop,
.parameter-template-drawer::backdrop,
.style-detail::backdrop,
.result-detail::backdrop {
  background: rgba(30, 43, 74, 0.42);
}

.style-picker-dialog,
.scene-init-dialog,
.required-fields-dialog-card,
.scene-editor-drawer-dialog,
.template-scene-editor-drawer-dialog,
.model-setting-drawer-dialog,
.style-source-drawer-dialog,
.parameter-template-drawer-dialog,
.style-detail-dialog,
.result-detail-dialog {
  margin: auto;
  width: 100%;
  padding: clamp(18px, 2vw, 24px);
}

.style-picker-dialog {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.style-detail-dialog {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.scene-editor-drawer-dialog {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  position: relative;
  border-color: rgba(124, 145, 198, 0.16);
  background: rgba(248, 250, 255, 0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.template-scene-editor-drawer-dialog {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  position: relative;
  border-color: rgba(124, 145, 198, 0.16);
  background: rgba(248, 250, 255, 0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.model-setting-drawer-dialog,
.style-source-drawer-dialog,
.parameter-template-drawer-dialog {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  position: relative;
  border-color: rgba(124, 145, 198, 0.16);
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(244, 248, 255, 0.98)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), transparent 58%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.parameter-template-drawer .scene-editor-scroll {
  padding-bottom: 50px;
}

.settings-group-first {
  padding-top: 0;
  border-top: 0;
}

.scene-init-dialog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.scene-init-dialog > * {
  min-width: 0;
}

.scene-init-dialog textarea {
  min-height: 220px;
  resize: vertical;
}

.required-fields-dialog-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  border: 1px solid rgba(124, 145, 198, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 255, 0.9));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.required-fields-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.required-fields-dialog-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.required-fields-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.required-fields-list-item {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 255, 0.74)),
    rgba(255, 255, 255, 0.5);
}

.required-fields-list-item.is-blocking {
  border-color: rgba(185, 75, 86, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 248, 249, 0.92), rgba(255, 244, 245, 0.82)),
    rgba(255, 255, 255, 0.56);
}

.required-fields-list-label {
  color: var(--ink);
}

.required-fields-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.style-detail-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr);
  gap: 20px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.style-detail-image-wrap {
  min-height: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(40, 215, 187, 0.08));
}

.style-detail-image {
  width: 100%;
  height: 100%;
  display: block;
  max-height: 100%;
  object-fit: contain;
}

.style-detail-copy {
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  overflow: hidden;
}

.style-detail-gallery-wrap[hidden] {
  display: none;
}

.style-detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.92)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), transparent 62%);
}

.style-detail-tab {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.style-detail-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.68);
}

.style-detail-tab.is-active {
  color: color-mix(in oklch, var(--accent-strong) 82%, black);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(30, 43, 74, 0.08);
}

.style-detail-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}

.style-detail-panel {
  display: grid;
  min-height: 0;
  align-content: start;
}

.style-detail-panel[data-style-detail-panel="scenes"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.style-detail-scenes {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.style-detail-scene-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.style-detail-scene-groups {
  display: grid;
  flex: 1 1 auto;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
  align-content: start;
}

.style-detail-scene-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  flex: 0 0 auto;
  padding-top: 10px;
}

.style-detail-scene-group {
  display: grid;
  gap: 8px;
  align-content: start;
}

.style-detail-scene-group-title {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.style-detail-scene-list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.style-detail-scene-row {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.76);
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.style-detail-scene-row:hover {
  border-color: rgba(var(--accent-rgb), 0.32);
  color: var(--ink);
  transform: translateY(-1px);
}

.style-detail-scene-row.is-active {
  border-color: rgba(var(--accent-rgb), 0.36);
  color: color-mix(in oklch, var(--accent-strong) 84%, black);
  background: rgba(var(--accent-rgb), 0.1);
}

.style-detail-scene-row.is-locked {
  cursor: default;
}

.style-detail-scene-row.is-locked:hover {
  border-color: rgba(var(--accent-rgb), 0.36);
  color: color-mix(in oklch, var(--accent-strong) 84%, black);
  background: rgba(var(--accent-rgb), 0.1);
  transform: none;
}

.style-detail-scene-row:disabled {
  cursor: progress;
  opacity: 0.7;
}

.style-detail-scene-row-main,
.style-detail-scene-row-label,
.style-detail-scene-row-state {
  min-width: 0;
}

.style-detail-scene-row-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.style-detail-scene-row-label {
  overflow-wrap: anywhere;
}

.style-detail-scene-row-spinner {
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  flex: 0 0 auto;
  animation: artwork-spin 0.7s linear infinite;
}

.style-detail-scene-row-state {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  white-space: nowrap;
  flex: 0 0 auto;
  border-radius: 4px;
  color: color-mix(in oklch, currentColor 92%, white);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.08));
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}

.style-detail-scene-row-state.is-visible {
  opacity: 1;
  transform: scale(1);
}

.style-detail-scene-row.is-active.is-generated .style-detail-scene-row-state {
  background: linear-gradient(135deg, rgba(30, 43, 74, 0.18), rgba(var(--accent-rgb), 0.14));
}

.style-detail-scene-row-state svg {
  width: 14px;
  height: 14px;
  display: block;
}

.style-detail-inline-feedback {
  font-size: 0.86rem;
  color: var(--muted);
}

.style-detail-inline-feedback.is-error {
  color: var(--warning);
}

.style-detail-body-copy,
.style-detail-empty {
  padding: 16px;
  border-radius: 4px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  background: rgba(255, 255, 255, 0.82);
}

.style-detail-prompt-panel {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
}

.style-detail-scene-footer .solid-btn {
  min-width: 128px;
}

.style-detail-prompt-footer {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(247, 250, 255, 0.96), rgba(255, 255, 255, 0.98)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), transparent 62%);
}

.style-detail-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.style-detail-prompt-actions .text-btn,
.style-detail-prompt-actions .ghost-btn {
  min-width: 108px;
}

.style-detail-prompt-actions .text-btn.is-loading,
.style-detail-prompt-actions .ghost-btn.is-loading {
  opacity: 1;
}

.style-detail-prompt-actions .btn-label {
  display: inline-block;
}

.style-detail-prompt-actions .text-btn.is-loading .btn-label,
.style-detail-prompt-actions .ghost-btn.is-loading .btn-label {
  display: none;
}

.style-detail-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.style-detail-gallery-item {
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.style-detail-gallery-item.is-active {
  outline: 2px solid rgba(var(--accent-rgb), 0.48);
  outline-offset: -2px;
}

.style-detail-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.style-detail-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.style-detail-links a {
  color: var(--accent-strong);
}

.style-detail-info-grid {
  display: grid;
  min-height: 0;
  overflow: auto;
  gap: 12px;
  padding-right: 2px;
}

.style-detail-tabs:has(.style-detail-tab:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

#style-detail .panel-head {
  min-width: 0;
}

#style-detail-title {
  min-width: 0;
}

#btn-close-style-detail {
  width: 72px;
  flex: 0 0 72px;
}

.style-detail-info-panel {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
}

.style-detail-info-panel-stock {
  grid-template-rows: minmax(0, 1fr) auto;
}

.style-detail-info-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 2px;
}

.style-detail-save-local-btn {
  min-width: 132px;
}

.style-detail-info-grid-skeleton {
  grid-template-columns: minmax(0, 1fr);
}

.style-detail-info-card-skeleton {
  border-color: rgba(124, 145, 198, 0.08);
  background: rgba(248, 250, 255, 0.92);
}

.style-detail-info-card-skeleton {
  min-height: 88px;
  --skeleton-layout:
    linear-gradient(rgba(124, 145, 198, 0.16), rgba(124, 145, 198, 0.16)) 0 0 / 72px 10px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 28px / 84% 14px no-repeat,
    linear-gradient(rgba(124, 145, 198, 0.08), rgba(124, 145, 198, 0.08)) 0 52px / 46% 12px no-repeat;
  --skeleton-detail:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

.style-detail-info-card-image-type {
  order: 98;
}

.style-detail-delete-btn.is-danger {
  color: #b94b56;
}

.style-detail-delete-cancel-btn {
  flex: 0 0 auto;
}

.style-detail-info-card-rating {
  order: 99;
}

.style-detail-info-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 145, 198, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
}

.style-detail-info-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.style-detail-info-value {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.style-detail-info-select {
  width: 100%;
  min-height: 51px;
  border: 1px solid rgba(124, 145, 198, 0.18);
  border-radius: 4px;
  background-color: var(--panel-strong);
  padding: 13px 44px 13px 15px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238090ad' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-position: calc(100% - 18px) 50%;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.style-detail-info-select:focus {
  border-color: rgba(var(--accent-rgb), 0.44);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.12);
}

.style-detail-info-select:disabled {
  opacity: 0.68;
  cursor: wait;
}

.style-detail-info-select + .custom-select-shell .custom-select-trigger {
  min-height: 51px;
}

.style-detail-info-select + .custom-select-shell .custom-select-trigger:disabled {
  cursor: wait;
}

.style-detail-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 4px;
  font-size: 1.08rem;
  line-height: 1;
}

.style-detail-rating-star {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(124, 145, 198, 0.28);
  transition: color 140ms ease, transform 140ms ease;
}

.style-detail-rating-star.is-filled {
  color: #d4a227;
}

.style-detail-rating:not(.is-saving) .style-detail-rating-star:hover,
.style-detail-rating:not(.is-saving) .style-detail-rating-star:hover ~ .style-detail-rating-star {
  color: #d4a227;
  transform: translateY(-1px) scale(1.06);
}

.style-detail-rating.is-saving {
  opacity: 0.72;
  pointer-events: none;
}

.style-detail-info-value a {
  color: var(--accent-strong);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.style-detail-body-copy {
  min-height: 0;
  max-height: none;
  overflow: auto;
  font-size: 0.92rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.style-detail-empty {
  min-height: 144px;
  display: grid;
  gap: 6px;
  align-content: center;
}

.style-detail-empty-title {
  font-size: 1rem;
}

.result-detail-dialog {
  height: 100%;
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.result-detail .panel-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
}

.result-detail-view-switch {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(124, 145, 198, 0.08);
}

.result-detail-view-switch[hidden] {
  display: none;
}

.result-detail-view-tab {
  border: 0;
  background: transparent;
  color: var(--muted-text);
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.result-detail-view-tab.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--text-strong);
}

.result-detail-image-wrap {
  display: grid;
  place-items: center;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border-radius: 4px;
  background-image:
    var(--result-detail-display-url, none),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(40, 215, 187, 0.08));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain, cover;
}

.result-detail-image-wrap.is-model3d {
  background-image: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(40, 215, 187, 0.08));
  background-size: cover;
}

.result-detail-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding-top: 2px;
}

.result-detail-footer-copy {
  min-width: 0;
  position: relative;
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
}

.result-detail-meta {
  min-width: 0;
}

.result-detail-meta.is-hidden-for-feedback {
  visibility: hidden;
}

.result-detail-feedback {
  min-width: 0;
  display: none;
  position: absolute;
  inset: 0 0 auto 0;
}

.result-detail-feedback:not(:empty) {
  display: block;
}

.result-detail-delete-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.result-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  align-self: center;
}

.result-detail-image {
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.result-detail-cutout-image {
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.result-detail-model3d-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.result-detail-model-viewer,
.result-detail-model-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.result-detail-model-empty {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--muted-text);
  text-align: center;
}

.result-detail-model-empty.is-error {
  color: var(--danger-text);
}

.result-detail-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.16);
  border-top-color: rgba(var(--accent-rgb), 0.9);
  animation: artwork-spin 0.72s linear infinite;
}

.result-detail-spinner-lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

.result-detail-pending-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(247, 250, 255, 0.52)),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(40, 215, 187, 0.06));
  backdrop-filter: blur(4px);
  color: var(--text-strong);
  text-align: center;
  pointer-events: none;
}

@keyframes artwork-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes artwork-progress {
  0% {
    transform: translateX(-42%);
  }

  100% {
    transform: translateX(42%);
  }
}

@keyframes artwork-skeleton {
  0% {
    background-position: -160% 0, 0 0;
  }

  100% {
    background-position: 260% 0, 0 0;
  }
}

@keyframes prompt-overlay-sweep {
  0% {
    background-position: -180% 0, 0 0;
  }

  100% {
    background-position: 220% 0, 0 0;
  }
}

@keyframes prompt-preview-refresh {
  0% {
    opacity: 0.56;
  }

  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prompt-preview-shell.is-loading::before,
  .prompt-preview.is-replacing,
  .mockup-preview-device-wrap,
  .mockup-preview-transition-ghost {
    animation: none;
    transition: none;
  }
}

@media (max-width: 1360px) {
  .style-grid-library,
  .style-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .style-grid.is-loading,
  .recent-list.is-loading,
  .style-picker-grid.is-loading {
    --skeleton-card-width: calc((100% - 48px) / 4);
  }
}

@media (max-width: 1240px) {
  .studio-shell {
    grid-template-columns: 1fr;
  }

  .studio-sidebar {
    position: static;
    height: auto;
    padding: 18px 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(124, 145, 198, 0.14);
  }

  .compose-layout,
  .scene-manager-layout,
  .settings-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .page-view-scenes,
  .page-view-styles,
  .page-view-results,
  .scene-library-board,
  .library-section,
  .page-scroll-region {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .page-view-results {
    padding: 0;
  }

  .page-view-results .library-section {
    height: auto;
    min-height: 0;
  }

  .compose-panel,
  .stage-panel,
  .scene-manager-sidebar,
  .scene-manager-editor,
  .scene-editor-scroll,
  .settings-shell,
  .settings-board,
  .settings-stream {
    height: auto;
    overflow: visible;
  }

  .style-grid,
  .recent-list,
  .scene-library-list,
  .style-grid-library,
  .style-picker-grid,
  .style-source-strip,
  .settings-section-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .style-grid.is-loading,
  .recent-list.is-loading,
  .style-picker-grid.is-loading {
    --skeleton-card-width: calc((100% - 32px) / 3);
  }
}

@media (max-width: 960px) {
  .settings-frame {
    grid-template-columns: 1fr;
  }

  .settings-sidebar {
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(124, 145, 198, 0.12);
  }

  .settings-nav {
    gap: 12px;
  }

  .settings-nav-group {
    gap: 6px;
  }

  .settings-content {
    padding: 16px 0 0;
  }

  .field-cluster,
  .field-cluster-triple,
  .structured-form,
  .scene-library-list,
  .selection-strip,
  .reference-strip,
  .style-grid,
  .recent-list,
  .style-grid-library,
  .style-picker-grid,
  .style-source-strip,
  .style-source-stats,
  .model-parameter-grid,
  .settings-primary-fields,
  .settings-section-summary,
  .model-capability-grid,
  .template-inline-grid,
  .template-inline-grid-wide,
  .template-toggle-grid,
  .template-definition-grid,
  .parameter-template-head,
  .schema-card-row,
  .schema-card-row-primary,
  .schema-card-row-routing,
  .schema-card-row-secondary,
  .model-setting-row,
  .style-detail-layout {
    grid-template-columns: 1fr;
  }

  .template-canvas-aspect-row {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .structured-form.is-loading {
    min-height: 320px;
    --skeleton-layout:
      linear-gradient(rgba(124, 145, 198, 0.18), rgba(124, 145, 198, 0.18)) 0 0 / 100% 64px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 82px / 100% 108px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.18), rgba(124, 145, 198, 0.18)) 0 208px / 100% 64px no-repeat;
  }

  .style-grid.is-loading,
  .recent-list.is-loading,
  .style-picker-grid.is-loading {
    --skeleton-card-width: 100%;
    min-height: 760px;
  }

  .scene-editor-footer {
    flex-wrap: nowrap;
  }

  .scene-editor-footer-feedback {
    max-width: none;
  }

  .scene-editor-footer-actions {
    flex: 1 1 auto;
    min-width: 0;
  }

  .scene-editor-footer .danger-btn,
  .scene-editor-footer .solid-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .settings-index-head {
    align-items: start;
    flex-direction: column;
  }

  .settings-action-tray {
    justify-content: flex-start;
  }

  .settings-form.is-loading {
    min-height: 900px;
    --skeleton-layout:
      linear-gradient(rgba(124, 145, 198, 0.18), rgba(124, 145, 198, 0.18)) 0 0 / 100% 52px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 82px / 88px 14px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 114px / 100% 52px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 186px / 100% 52px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 258px / 100% 52px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.12), rgba(124, 145, 198, 0.12)) 0 350px / 88px 14px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 0 382px / 100% 52px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 0 454px / 100% 52px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 0 526px / 100% 52px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 0 598px / 100% 52px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.13), rgba(124, 145, 198, 0.13)) 0 670px / 100% 52px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.1), rgba(124, 145, 198, 0.1)) 0 752px / 100% 46px no-repeat,
      linear-gradient(rgba(124, 145, 198, 0.1), rgba(124, 145, 198, 0.1)) 0 820px / 100% 80px no-repeat;
  }

  .template-item-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-item-name {
    grid-column: 1 / -1;
  }

  .template-icon-results {
    grid-template-columns: 1fr;
  }

  .template-item-remove {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 1180px) {
  .mockup-dialog-layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: min(78vh, 980px);
  }

  .mockup-render-settings-panel {
    grid-column: 1 / -1;
  }

  .style-map-dialog-layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .style-map-settings-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .mockup-dialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }

  .mockup-dialog-card {
    padding: 16px;
    height: 100%;
  }

  .style-map-dialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }

  .style-map-dialog-card {
    padding: 16px;
    height: 100%;
  }

  .mockup-dialog-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
    height: 100%;
    max-height: none;
  }

  .style-map-dialog-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(260px, 1fr) auto;
  }

  .style-map-location-row,
  .style-map-control-footer,
  .style-map-settings-footer {
    grid-template-columns: 1fr;
    display: grid;
  }

  .style-map-color-control-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .style-map-color-picker-panel {
    width: min(100%, calc(100vw - 56px));
  }

  .mockup-preview-stage {
    width: min(var(--mockup-stage-fit-width, 72%), 92%);
  }

  .studio-shell {
    padding: 0;
  }

  .panel-head,
  .action-row,
  .result-detail-actions,
  .schema-card-actions,
  .panel-head-actions,
  .parameter-toolbar,
  .pagination-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .page-nav,
  .ghost-btn,
  .solid-btn,
  .danger-btn {
    width: 100%;
  }

  .style-detail-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .style-detail-tabs {
    grid-template-columns: 1fr;
  }

  .page-nav {
    grid-template-columns: 1fr;
  }

  .style-picker,
  .scene-init,
  .style-detail,
  .result-detail {
    width: calc(100vw - 20px);
  }

  .scene-init {
    max-width: calc(100vw - 20px);
  }

  .style-detail,
  .result-detail {
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .scene-init-dialog {
    padding: 14px;
  }

  .result-detail-dialog {
    padding: 14px;
  }

  .studio-main {
    padding: 16px 14px 18px;
  }

  .stage-canvas {
    min-height: 0;
  }

  .template-item-row {
    grid-template-columns: 1fr;
  }

  .template-icon-search-shell,
  .template-icon-current,
  .template-feature-query-row {
    grid-template-columns: 1fr;
  }

  .template-icon-current-visual {
    justify-self: start;
  }

  .template-new-field-type-field {
    min-width: 0;
  }

  .template-definition-icon-preset {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .template-definition-icon-preset > .text-btn {
    grid-column: 2;
    justify-self: start;
    width: auto;
  }

  .template-item-remove,
  .template-add-item-btn,
  .template-stage-actions > .solid-btn {
    width: 100%;
  }

  .template-stage-actions {
    justify-content: stretch;
  }
}

@media (max-height: 720px) {
  .result-detail {
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .result-detail-footer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .result-detail-actions {
    justify-content: flex-start;
  }
}

.style-library-head {
  align-items: flex-start;
}

.style-library-head .filter-strip {
  min-height: 44px;
}

.style-local-upload-btn {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
  border-color: rgba(255, 118, 94, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 247, 244, 0.78)),
    linear-gradient(135deg, rgba(255, 118, 94, 0.1), rgba(35, 171, 122, 0.04));
  color: color-mix(in oklch, var(--ink) 76%, oklch(0.64 0.21 30));
  box-shadow: 0 8px 18px rgba(124, 83, 68, 0.06);
}

.style-local-upload-btn .material-symbols-outlined {
  font-size: 20px;
  color: oklch(0.64 0.21 30);
  font-variation-settings: 'OPSZ' 24, 'wght' 300, 'FILL' 0, 'GRAD' 0;
}

.style-local-upload-btn:hover,
.style-local-upload-btn:focus-visible {
  outline: none;
  border-color: rgba(255, 118, 94, 0.36);
  box-shadow: 0 12px 24px rgba(124, 83, 68, 0.08), 0 0 0 4px rgba(255, 118, 94, 0.08);
}

.style-local-upload-btn:disabled {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.local-style-upload-card {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 44px));
  grid-template-rows: auto auto minmax(160px, 1fr) auto auto;
}

.local-style-upload-dropzone {
  min-height: 112px;
  border: 1px dashed rgba(255, 118, 94, 0.34);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 247, 244, 0.72)),
    linear-gradient(135deg, rgba(255, 118, 94, 0.08), rgba(35, 171, 122, 0.04));
  color: color-mix(in oklch, var(--ink) 72%, oklch(0.64 0.21 30));
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.local-style-upload-dropzone .material-symbols-outlined {
  font-size: 26px;
  color: oklch(0.64 0.21 30);
  font-variation-settings: 'OPSZ' 28, 'wght' 300, 'FILL' 0, 'GRAD' 0;
}

.local-style-upload-dropzone:hover,
.local-style-upload-dropzone:focus-within {
  transform: translateY(-1px);
  border-color: rgba(255, 118, 94, 0.48);
  box-shadow: 0 14px 28px rgba(124, 83, 68, 0.08), 0 0 0 4px rgba(255, 118, 94, 0.08);
}

.local-style-upload-grid {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  padding-right: 4px;
}

.local-style-upload-empty {
  grid-column: 1 / -1;
  min-height: 140px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid rgba(124, 145, 198, 0.12);
  background: rgba(255, 255, 255, 0.58);
}

.local-style-upload-item {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.local-style-upload-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background: rgba(124, 145, 198, 0.1);
  box-shadow: inset 0 0 0 1px rgba(124, 145, 198, 0.12);
}

.local-style-upload-item-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.local-style-upload-item-copy strong,
.local-style-upload-item-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-style-upload-item-copy strong {
  font-family: var(--ui-font);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink);
}

.local-style-upload-item-copy span {
  font-size: 0.8rem;
  color: var(--muted);
}

.local-style-upload-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 30, 51, 0.68);
  color: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}

.local-style-upload-remove .material-symbols-outlined {
  font-size: 17px;
  font-variation-settings: 'OPSZ' 20, 'wght' 300, 'FILL' 0, 'GRAD' 0;
}

.local-style-upload-remove:hover,
.local-style-upload-remove:focus-visible {
  outline: none;
  transform: translateY(-1px);
  background: rgba(22, 30, 51, 0.82);
}

.local-style-upload-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

@media (max-width: 960px) {
  .local-style-upload-grid {
    grid-template-columns: 1fr;
  }

  .local-style-upload-actions {
    justify-content: stretch;
  }

  .local-style-upload-actions > * {
    flex: 1 1 0;
    min-width: 0;
  }
}
.local-style-upload-card {
  gap: 14px;
}

.local-style-upload-card .panel-head {
  gap: 12px;
}

.local-style-upload-count {
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 118, 94, 0.18);
  background: rgba(255, 247, 244, 0.82);
  color: color-mix(in oklch, oklch(0.64 0.21 30) 82%, var(--ink));
  font-size: 0.78rem;
  line-height: 1;
}

.local-style-upload-count[hidden] {
  display: none;
}

.local-style-upload-dropzone {
  min-height: 96px;
  border-style: solid;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

.local-style-upload-card.has-local-style-items .local-style-upload-dropzone {
  min-height: 60px;
}

.local-style-upload-grid {
  gap: 14px;
  padding-right: 2px;
}

.local-style-upload-empty {
  min-height: 190px;
  gap: 8px;
  align-content: center;
  border-radius: 4px;
  border-style: dashed;
}

.local-style-upload-empty .material-symbols-outlined {
  font-size: 28px;
  color: oklch(0.64 0.21 30 / 0.72);
  font-variation-settings: 'OPSZ' 28, 'wght' 300, 'FILL' 0, 'GRAD' 0;
}

.local-style-upload-item {
  padding: 8px;
  border: 1px solid rgba(124, 145, 198, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 22px rgba(44, 71, 122, 0.05);
}

.local-style-upload-item img {
  border-radius: 5px;
}

.local-style-upload-remove:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

.local-style-upload-actions {
  padding-top: 2px;
  border-top: 1px solid rgba(124, 145, 198, 0.1);
}


[data-canvas-runtime="online"] body:has(.duobit-online-activation-screen) {
  min-height: 100vh;
  background: #f6f7f8;
  color: #1f252d;
}

.duobit-online-activation-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.duobit-online-activation-panel {
  width: min(680px, 100%);
  display: grid;
  gap: 24px;
  padding: 28px;
  border: 1px solid rgba(35, 44, 56, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(32, 40, 52, 0.10);
}

.duobit-online-activation-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #6b7280;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.duobit-online-activation-brand strong {
  color: #202833;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}

.duobit-online-activation-copy {
  display: grid;
  gap: 10px;
}

.duobit-online-activation-copy h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 720;
  letter-spacing: 0;
}

.duobit-online-activation-copy p {
  max-width: 560px;
  margin: 0;
  color: #596273;
  font-size: 15px;
  line-height: 1.65;
}

.duobit-online-activation-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(35, 44, 56, 0.14);
}

.duobit-online-activation-status div {
  min-width: 0;
  padding: 16px 16px 16px 0;
  display: grid;
  gap: 8px;
}

.duobit-online-activation-status span {
  color: #7b8492;
  font-size: 12px;
}

.duobit-online-activation-status strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #202833;
  font-size: 14px;
  font-weight: 650;
}

.duobit-online-activation-primary {
  justify-self: start;
  height: 40px;
  border: 1px solid #202833;
  border-radius: 8px;
  padding: 0 16px;
  background: #202833;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}

@media (max-width: 720px) {
  .duobit-online-activation-screen {
    place-items: stretch;
    align-content: center;
  }

  .duobit-online-activation-copy h1 {
    font-size: 26px;
  }

  .duobit-online-activation-status {
    grid-template-columns: 1fr;
  }

  .duobit-online-activation-status div {
    padding-right: 0;
    border-bottom: 1px solid rgba(35, 44, 56, 0.10);
  }

  .duobit-online-activation-status div:last-child {
    border-bottom: 0;
  }
}