:root {
  color-scheme: dark;
  --bg: #0c0d0f;
  --panel: #101113;
  --surface: #1b1d20;
  --line: #ffffff12;
  --muted: #8a8d95;
  --accent: #b8a5f7;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: #eeeef0; font: 13px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
button, input, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; color: inherit; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 10px 14px; }
button:hover:not(:disabled) { background: #282a2e; border-color: #ffffff28; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.henshin-workspace { display: grid; grid-template-columns: 332px minmax(0, 1fr); gap: 12px; margin: 14px 20px 24px; height: calc(100svh - var(--header-height, 76px) - 38px); min-height: 580px; }
.composer, .workspace-panel { border: 1px solid #ffffff17; border-radius: 18px; background: var(--panel); min-width: 0; overflow: hidden; }
.composer { display: flex; flex-direction: column; }
.composer-scroll { padding: 16px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #35373c transparent; }
.model-card { position: relative; isolation: isolate; min-height: 140px; padding: 22px 18px 18px; margin-bottom: 16px; border-radius: 12px; border: 1px solid #ffffff0d; overflow: hidden; background: linear-gradient(110deg, #202027, #1d1c26 65%, #262332); }
.model-art { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.model-art span { position: absolute; width: 145px; height: 190px; border: 1px solid #beb0ed1c; border-radius: 30px; transform: rotate(30deg); right: -18px; top: -44px; background: linear-gradient(140deg, #b9a3fc08, transparent); }
.model-art span:nth-child(2) { right: 7px; top: -18px; }
.model-art span:nth-child(3) { right: 32px; top: 8px; }
.eyebrow { font-size: 9px; letter-spacing: 1.7px; font-weight: 600; color: #a5a1b1; }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -.9px; margin: 13px 0 2px; line-height: 1.2; }
.model-card p { font-size: 11px; color: #a5a3ad; margin: 6px 0 0; }
.modes { display: flex; padding: 4px; gap: 4px; border: 1px solid #ffffff12; background: #191a1d; border-radius: 11px; margin-bottom: 14px; }
.modes button { flex: 1; padding: 8px 3px; border: 1px solid transparent; background: transparent; color: #92949b; font-size: 11px; }
.modes .active { background: #2a2b30; color: #f1eef8; border-color: #ffffff0e; box-shadow: 0 1px 4px #0004; }
.drop { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; min-height: 184px; margin-bottom: 12px; padding: 22px 12px; border-radius: 12px; background: #191a1d; border: 1px solid #ffffff0c; outline: 1px dashed #ffffff0b; outline-offset: -7px; gap: 12px; }
.drop.drag { border-color: #b8a5f7; background: #282330; }
.upload-icon { width: 39px; height: 39px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #ffffff1c; background: linear-gradient(#424348, #27282c); box-shadow: inset 0 1px 4px #ffffff12; color: #e2e1e7; }
.upload-icon svg { width: 19px; height: 19px; }
.drop strong { font-size: 13px; line-height: 1.4; font-weight: 500; }
.drop small { color: #777a82; font-size: 10px; }
.image-drop { min-height: 169px; }
video { max-width: 100%; background: #090a0b; }
.source-preview { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 7px; background: #191a1d; }
#sourceVideo { width: 100%; max-height: 200px; border-radius: 8px; }
.source-details { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--muted); }
.source-details span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.text-button { border: 0; background: transparent; font-size: 10px; padding: 8px 4px; color: #c2b4e8; }
.image-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px; }
.image-grid:empty { margin: 0; }
.image-grid div { position: relative; }
.image-grid img { width: 100%; height: 64px; object-fit: cover; border-radius: 6px; }
.image-grid button { position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; padding: 0; background: #000c; border-radius: 50%; }
.field-label, .quality-head { display: flex; justify-content: space-between; color: #d2d2d7; font-size: 11px; margin: 19px 0 9px; }
.field-label span { color: #797b84; font-size: 10px; }
textarea { width: 100%; min-height: 82px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #16171a; resize: vertical; color: inherit; font-size: 11px; line-height: 1.6; }
textarea::placeholder { color: #71747b; }
.qualities { display: flex; gap: 7px; }
.qualities button { flex: 1; font-size: 11px; padding: 9px; color: #a3a5ad; background: #17181b; }
.qualities .active { border-color: #b8a5f75c; color: #e8dfff; background: #b8a5f70d; }
.audio-option { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-top: 18px; color: #b2b3bb; }
.audio-option input { accent-color: #aa96ea; }
#status { color: #b8a5f7; font-size: 11px; overflow-wrap: anywhere; margin: 13px 0 0; }
#status:empty { display: none; }
#status.error { color: #f3a9ad; }
.generate-bar { padding: 13px 16px; border-top: 1px solid var(--line); background: #101113; flex-shrink: 0; margin-top: auto; }
.primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 12px; font-size: 13px; font-weight: 600; border: 1px solid #cbbbf02b; background: #a792e0; color: #17131f; border-radius: 10px; }
.primary:hover:not(:disabled) { background: #b6a2eb; }
.primary:disabled { color: #929398; background: #292a2d; border-color: #ffffff04; opacity: 1; }
#cost { font-size: 11px; padding-left: 14px; border-left: 1px solid currentColor; }
.workspace-panel { display: flex; flex-direction: column; }
.workspace-tabs { display: flex; align-items: center; gap: 9px; padding: 13px 22px; border-bottom: 1px solid var(--line); min-height: 62px; flex-shrink: 0; }
.workspace-tabs button { display: flex; align-items: center; gap: 8px; color: #92949b; border: 1px solid transparent; background: transparent; font-size: 12px; padding: 9px 12px; }
.workspace-tabs .active { background: #25262a; color: #eeeef2; border-color: #ffffff0a; }
.workspace-view { padding: 24px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #35373c transparent; }
.view-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
h2 { font-size: 18px; font-weight: 500; letter-spacing: -.3px; margin: 0; }
.view-heading p { margin: 5px 0 0; font-size: 11px; color: var(--muted); }
.view-heading a { text-decoration: none; font-size: 11px; color: #b2b4bb; white-space: nowrap; }
.library-label { border: 1px solid #ffffff12; border-radius: 20px; padding: 7px 13px; font-size: 10px; color: #a8a9b1; white-space: nowrap; }
.filters { display: flex; gap: 7px; margin-bottom: 22px; }
.filters button { font-size: 11px; border-radius: 20px; padding: 6px 13px; color: #999ba4; border: 1px solid #ffffff10; background: transparent; }
.filters .active { color: #e4d9ff; background: #ab96e61c; border-color: #ab96e629; }
.empty { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; background: #1c1d22; border: 1px solid #ffffff10; border-radius: 16px; color: #96929f; }
.empty-icon svg { width: 24px; height: 24px; }
.empty h3 { font-size: 14px; font-weight: 500; margin: 20px 0 0; }
.empty p { color: #777a84; font-size: 11px; line-height: 1.8; margin: 9px 0 20px; }
.secondary { border: 1px solid #ffffff19; border-radius: 8px; background: #202126; color: #d2d2d9; font-size: 11px; text-decoration: none; padding: 9px 14px; }
.results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.result { background: #191a1d; border: 1px solid var(--line); border-radius: 12px; padding: 10px; overflow: hidden; }
.result video { width: 100%; height: 200px; object-fit: contain; border-radius: 8px; }
.result h3 { font-size: 10px; color: #9698a0; font-weight: 400; margin: 11px 0; }
.badge { font-size: 9px; letter-spacing: .4px; color: #b7afca; display: block; margin-bottom: 8px; }
.result-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.result-actions button { padding: 6px 9px; font-size: 10px; }
.processing { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; font-size: 11px; color: #ac9bd2; background: #141519; border-radius: 8px; text-align: center; }
.processing::before { content: ''; width: 21px; height: 21px; border: 2px solid #b8a5f72b; border-top-color: #b8a5f7; border-radius: 50%; animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.owner-controls { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 12px; border-radius: 10px; margin-bottom: 20px; }
#templateTitle { flex: 1; min-width: 0; padding: 9px 12px; background: #16171a; border: 1px solid var(--line); border-radius: 7px; color: inherit; font-size: 11px; }
.owner-upload { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; border: 1px solid #ffffff1c; border-radius: 7px; padding: 8px 12px; background: #28292d; white-space: nowrap; }
.library-status { font-size: 11px; color: #af9ed4; margin: 0 0 16px; }
.library-status:empty { display: none; }
.templates-grid { columns: 4 180px; column-gap: 14px; }
.template { position: relative; break-inside: avoid; margin-bottom: 14px; border-radius: 12px; overflow: hidden; background: #202126; border: 1px solid #ffffff0c; }
.template video { display: block; width: 100%; height: auto; min-height: 130px; object-fit: cover; }
.template-meta { position: absolute; inset: auto 0 0; padding: 35px 12px 12px; background: linear-gradient(transparent, #000c); display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.template h3 { font-size: 11px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-duration { font-size: 9px; color: #dedee6; background: #0006; position: absolute; top: 9px; right: 9px; padding: 2px 6px; border-radius: 4px; }
.template-recreate { background: #f3f2f6; border: 0; color: #17171c; padding: 6px 10px; border-radius: 6px; font-size: 10px; flex-shrink: 0; opacity: 0; transform: translateY(3px); transition: opacity .15s, transform .15s; }
.template:hover .template-recreate, .template:focus-within .template-recreate { opacity: 1; transform: none; }
.template-recreate:hover:not(:disabled) { background: white; }
.library-empty { min-height: 340px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #92949d; font-size: 12px; text-align: center; column-span: all; }
.library-empty p { max-width: 310px; font-size: 11px; color: #72757d; }
dialog { width: min(960px, 94vw); max-height: 90svh; overflow: auto; border: 1px solid #ffffff24; border-radius: 16px; background: #141518; color: inherit; padding: 18px; }
dialog::backdrop { background: #000c; }
#previewClose { float: right; border: 0; padding: 3px 10px; font-size: 22px; background: transparent; }
#previewDialog video { display: block; width: 100%; max-height: 70svh; margin: 10px 0 16px; border-radius: 8px; }
@media (min-width: 1650px) { .henshin-workspace { grid-template-columns: 370px minmax(0, 1fr); } .templates-grid { columns: 4; } }
@media (max-width: 1150px) { .henshin-workspace { grid-template-columns: 310px minmax(0, 1fr); margin: 12px; } .workspace-view { padding: 20px; } .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .templates-grid { columns: 2; } .library-label { display: none; } }
@media (hover: none) { .template-recreate { opacity: 1; transform: none; } }
@media (max-width: 740px) {
  .henshin-workspace { display: flex; flex-direction: column; height: auto; min-height: 0; margin: 12px 12px 90px; gap: 16px; }
  .composer-scroll { overflow: visible; }
  .model-card { min-height: 112px; }
  .drop { min-height: 154px; }
  .image-drop { min-height: 144px; }
  .workspace-panel { min-height: 440px; }
  .workspace-tabs { padding: 10px 12px; }
  .workspace-view { padding: 18px 14px; overflow: visible; }
  .view-heading { margin-bottom: 18px; }
  h2 { font-size: 16px; }
  .view-heading p { max-width: 240px; font-size: 10px; }
  .templates-grid { columns: 2; column-gap: 10px; }
  .template { margin-bottom: 10px; border-radius: 9px; }
  .template-meta { flex-direction: column; align-items: stretch; padding: 28px 9px 9px; gap: 7px; }
  .template-recreate { opacity: 1; transform: none; text-align: center; }
  .result video { height: 160px; }
  .result-actions button { padding: 6px; }
  .empty { min-height: 280px; padding: 15px; }
}
@media (prefers-reduced-motion: reduce) { .processing::before { animation: none; } .template-recreate { transition: none; } }

/* Search Models generation states and result actions. */
    .result-card-loader,
    .generation-stage{
      position:relative;
      width:min(88%,260px);
      min-height:150px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;
      color:rgba(255,255,255,.92);
      text-align:center;
      isolation:isolate;
    }
    .generation-stage-icon{
      position:relative;
      width:76px;
      height:76px;
      display:grid;
      place-items:center;
      border-radius:28px;
    }
    .generation-stage-icon::before,
    .generation-stage-icon::after{
      content:"";
      position:absolute;
      inset:3px;
      border-radius:50%;
      border:1.5px solid transparent;
      border-top-color:rgba(125,211,252,.92);
      border-right-color:rgba(192,132,252,.78);
      filter:drop-shadow(0 0 8px rgba(125,211,252,.42));
      animation:generationOrbit 1.55s linear infinite;
    }
    .generation-stage-icon::after{
      inset:11px;
      border-top-color:rgba(244,114,182,.92);
      border-right-color:transparent;
      border-bottom-color:rgba(129,140,248,.82);
      animation-direction:reverse;
      animation-duration:1.05s;
    }
    .generation-stage-core{
      position:relative;
      width:42px;
      height:42px;
      border-radius:16px 21px 15px 23px;
      background:linear-gradient(135deg,#38bdf8 0%,#8b5cf6 48%,#f725b8 100%);
      box-shadow:
        0 0 18px rgba(56,189,248,.42),
        0 0 34px rgba(139,92,246,.48),
        0 0 52px rgba(247,37,184,.24);
      animation:generationCore 2s ease-in-out infinite;
    }
    .generation-stage-core::before,
    .generation-stage-core::after{
      content:"";
      position:absolute;
      width:6px;
      height:6px;
      border-radius:50%;
      background:#fff;
      box-shadow:0 0 12px rgba(255,255,255,.9);
      animation:generationSpark 1.7s ease-in-out infinite;
    }
    .generation-stage-core::before{ top:5px; right:8px; }
    .generation-stage-core::after{ left:7px; bottom:6px; animation-delay:-.8s; }
    .request-loading-spinner{
      display:none;
      width:48px;
      height:48px;
      border-radius:50%;
      border:4px solid rgba(255,255,255,.12);
      border-top-color:#c084fc;
      border-right-color:#38bdf8;
      box-shadow:0 0 24px rgba(99,102,241,.22);
      animation:requestLoadingSpin .82s linear infinite;
    }
    .generation-stage-label{
      font-size:13px;
      line-height:1.2;
      font-weight:850;
      letter-spacing:.01em;
      color:rgba(255,255,255,.96);
    }
    .generation-stage[data-stage="requesting"] .generation-stage-icon::before,
    .generation-stage[data-stage="requesting"] .generation-stage-icon::after,
    .generation-stage[data-stage="requesting"] .generation-stage-core{
      display:none;
    }
    .generation-stage[data-stage="requesting"] .request-loading-spinner{ display:block; }
    .generation-stage[data-stage="queued"]{ color:#fde68a; }
    .generation-stage[data-stage="queued"] .generation-stage-icon::before,
    .generation-stage[data-stage="queued"] .generation-stage-icon::after,
    .generation-stage[data-stage="queued"] .generation-stage-core{ display:none; }
    .generation-stage[data-stage="queued"] .request-loading-spinner{
      display:block;
      border-color:rgba(250,204,21,.18);
      border-top-color:#facc15;
      border-right-color:#fb7185;
      box-shadow:0 0 26px rgba(250,204,21,.24);
      animation-duration:1.25s;
    }
    .generation-stage[data-stage="queued"] .generation-stage-label{ color:#fde68a; }
    .generation-stage[data-stage="generating"] .generation-stage-icon{
      animation:generationFloat 2.4s ease-in-out infinite;
    }
    @keyframes requestLoadingSpin{ to{ transform:rotate(360deg); } }
    @keyframes generationOrbit{ to{ transform:rotate(360deg); } }
    @keyframes generationCore{
      0%,100%{ transform:scale(.92) rotate(-5deg); border-radius:16px 21px 15px 23px; }
      50%{ transform:scale(1.08) rotate(7deg); border-radius:23px 15px 22px 16px; }
    }
    @keyframes generationSpark{
      0%,100%{ opacity:.25; transform:scale(.6); }
      50%{ opacity:1; transform:scale(1.15); }
    }
    @keyframes generationFloat{
      0%,100%{ transform:translateY(0); }
      50%{ transform:translateY(-5px); }
    }

.result-media { min-height: 220px; display: flex; align-items: center; justify-content: center; background: #141519; border-radius: 9px; overflow: hidden; }
.result-media video { height: 220px; }
.result > .generation-stage { width: 100%; min-height: 260px; }
.result-actions { justify-content: center; }
.result-actions button:has(svg) { width: 36px; height: 36px; border-radius: 50%; padding: 8px; }
.result-actions button[data-action="preview"] { background: linear-gradient(135deg,#22c55e,#84cc16); color: white; }
.result-actions button[data-action="recreate"] { background: linear-gradient(135deg,#f59e0b,#f97316); color: white; }
.result-actions button[data-action="download"] { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: white; }
.result-failed-state { display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px; gap:12px; }
.result-failed-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#ef44441a; color:#fca5a5; font-size:28px; }
.result-failed-state p { margin:0; color:#92949b; font-size:11px; }
.template-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; border-radius: inherit; }
.template-open:hover:not(:disabled) { background: transparent; }
.template-meta { pointer-events: none; }
.template-recreate { pointer-events: auto; position: relative; }
.owner-upload { text-decoration: none; color: inherit; }
.detail-dialog { width: min(1100px,94vw); padding:0; overflow: hidden; }
.detail-close { position:absolute; top:12px; right:12px; z-index:2; width:30px; height:30px; padding:0; border-radius:50%; background:#292a2d; color:white; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; height:min(680px,80svh); grid-template-rows:minmax(0,1fr); }
.detail-stage { display:grid; grid-template-rows:minmax(0,1fr); min-height:0; overflow:hidden; place-items:center; background:radial-gradient(ellipse at center,#27232f,#0c0d0f); padding:24px; min-width:0; }
#previewDialog .detail-stage video { width:100%; max-height:70svh; margin:0; object-fit:contain; }
.detail-sidebar { padding:28px 20px 20px; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:12px; border-left:1px solid var(--line); }
.detail-content { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px; }
.detail-content > * { flex-shrink:0; }
.detail-sidebar h2 { margin-top:0; padding-right:20px; }
.detail-sidebar h3 { font-size:11px; font-weight:500; margin:0 0 9px; color:#a9aab3; }
.detail-assets { display:flex; gap:8px; overflow-x:auto; padding-bottom:5px; }
.detail-assets > div { width:84px; flex:0 0 84px; }
.detail-assets img, #previewDialog .detail-assets video { display:block; width:84px; height:84px; object-fit:cover; border-radius:8px; margin:0 0 5px; }
.detail-assets span { color:#92949b; font-size:9px; }
.detail-section-head { display:flex; align-items:center; justify-content:space-between; }
.detail-prompt { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; color:#d0cfd7; line-height:1.7; margin:0; }
.detail-facts { margin:0; font-size:11px; }
.detail-facts div { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid var(--line); }
.detail-facts dt { color:#92949b; }
.detail-facts dd { margin:0; text-align:right; }
.detail-actions { margin-top:auto; flex-shrink:0; display:grid; gap:8px; }
.detail-actions button { display:flex; justify-content:center; gap:8px; align-items:center; }
.template-editor { max-width:1000px; margin:24px auto 60px; padding:24px; border:1px solid var(--line); background:var(--panel); border-radius:18px; }
.template-editor-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.template-editor-head a { color:var(--muted); text-decoration:none; }
.template-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.editor-video { width:100%; height:240px; object-fit:contain; border-radius:10px; margin-top:12px; }
.editor-field { display:block; margin-bottom:16px; }
.editor-field > span { display:block; font-size:12px; margin-bottom:8px; color:#bbbcc4; }
.editor-field input:not([type=checkbox]), .editor-field select { width:100%; color:inherit; padding:10px; background:#191a1d; border:1px solid var(--line); border-radius:8px; }
.editor-file { width:100%; }
#editorImages { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 20px; }
#editorImages img { width:64px; height:64px; object-fit:cover; border-radius:8px; }
.editor-publish { max-width:240px; margin-top:24px; }
@media(max-width:740px) { .detail-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 24px); overflow:hidden; } .detail-layout { grid-template-columns:1fr; grid-template-rows:minmax(0,32%) minmax(0,1fr); height:calc(100dvh - 24px); max-height:760px; } .detail-stage { min-height:0; padding:8px; } #previewDialog .detail-stage video { height:100%; max-height:100%; } .detail-sidebar { min-height:0; height:auto; padding:12px; gap:10px; border-left:0; border-top:1px solid var(--line); } .detail-content { gap:10px; } .detail-sidebar h2 { font-size:16px; } .detail-sidebar .eyebrow { display:none; } .detail-assets > div { width:64px; flex-basis:64px; } .detail-assets img, #previewDialog .detail-assets video { width:64px; height:64px; } .detail-content > section:not(.detail-inputs), .detail-facts { padding:10px; } .detail-facts div { padding:6px 0; } .template-editor { margin:12px; padding:18px; } .template-editor-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .generation-stage *, .generation-stage-icon::before, .generation-stage-icon::after { animation:none!important; } }

/* References stay inside the image uploader, including Add and Remove controls. */
.image-drop { padding:12px; gap:0; }
.image-upload-empty { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; width:100%; min-height:143px; padding:10px; border:0; background:transparent; }
.image-upload-empty:hover:not(:disabled) { background:transparent; }
.image-drop.has-images { min-height:0; outline:none; }
.image-drop .image-grid { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; max-height:290px; overflow-y:auto; scrollbar-width:thin; padding:3px; }
.image-drop .image-reference-tile { position:relative; min-width:0; aspect-ratio:1; }
.image-drop .image-grid img { display:block; width:100%; height:100%; object-fit:cover; border-radius:9px; border:1px solid #ffffff14; }
.image-drop .image-grid .image-add-tile { position:static; display:grid; place-items:center; width:100%; height:auto; aspect-ratio:1; padding:0; border-radius:9px; background:#23252a; border:1px dashed #ffffff25; color:#9b9ea8; }
.image-drop .image-grid .image-add-tile:hover:not(:disabled) { background:#2b2835; border-color:#b8a5f770; color:#d5c8f6; }
.image-drop .image-grid .image-reference-tile button { right:4px; top:4px; width:20px; height:20px; font-size:14px; line-height:1; border:1px solid #ffffff20; }

/* Henshin uses the same media proportions and compact actions as Search Models. */
.model-video { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.model-card::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#08090eee,#08090e36 100%); }
.model-card .eyebrow, .model-card p { color:#d6d4df; }
.model-card h1 { color:white; }
.source-preview, .editor-media { position:relative; }
.remove-media, #previewClose, .image-drop .image-grid .image-reference-tile button { display:grid; place-items:center; padding:0; line-height:1; background:#101116dd; color:white; border:1px solid #ffffff30; border-radius:50%; box-shadow:0 2px 8px #0004; }
.remove-media { position:absolute; top:10px; right:10px; z-index:2; width:26px; height:26px; }
.remove-media svg, .image-reference-tile button svg { width:13px; height:13px; stroke-width:2; }
#previewClose { position:absolute; float:none; width:32px; height:32px; top:12px; right:12px; }
#previewClose svg { width:18px; height:18px; stroke-width:2; }
.source-details { padding:4px 3px; }
.workspace-view { min-height:0; }
.results-grid { display:block; columns:3; column-gap:16px; }
.result { display:inline-flex; flex-direction:column; width:100%; margin:0 0 16px; break-inside:avoid; padding:0; border-radius:18px; background:#070c19; border:1px solid #ffffff20; }
.result-media { position:relative; border-radius:0; width:100%; min-height:0; aspect-ratio:9/16; background:#090c13; }
.result-landscape .result-media { aspect-ratio:16/9; }
.result-square .result-media { aspect-ratio:1; }
.result .result-media video { width:100%; height:100%; border-radius:0; object-fit:cover; cursor:pointer; }
.result-body { padding:10px 12px; }
.result-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.result-head strong { font-size:11px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-head > span { font-size:10px; color:#ffffff70; }
.result-prompt { margin:5px 0 8px; font-size:10px; line-height:1.5; color:#ffffff99; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.result-bottom { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:32px; }
.result-state { font-size:10px; color:#c7d2fe; }
.result-state.ready { color:#55d5af; }
.result-state.failed { color:#fb7185; }
.result-status-chip { position:absolute; left:9px; top:9px; z-index:1; padding:2px 9px; font-size:10px; background:#232833de; border-radius:20px; }
.result-status-chip.ready { background:#229d78; }
.result-status-chip.failed { background:#c83a45; }
.result-actions { justify-content:flex-end; gap:6px; }
.result-actions button:has(svg) { display:grid; place-items:center; width:32px; height:32px; padding:0; }
.result-actions svg { width:16px; height:16px; }
.result-actions button[data-action="preview"] { box-shadow:0 4px 12px #22c55e35; }
.result-actions button[data-action="recreate"] { box-shadow:0 4px 12px #f9731640; }
.result-actions button[data-action="download"] { box-shadow:0 4px 12px #8b5cf635; }
.result-preview-open { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#101116dd; border:1px solid #ffffff40; border-radius:20px; font-size:11px; opacity:0; pointer-events:none; transition:opacity .15s; }
.result-media:hover .result-preview-open, .result-media:focus-within .result-preview-open { opacity:1; pointer-events:auto; }
.template-delete { position:absolute; top:8px; left:8px; z-index:1; display:grid; place-items:center; width:28px; height:28px; padding:0; background:#101116d9; border:1px solid #ffffff25; border-radius:8px; }
.template-delete svg { width:15px; height:15px; }
.template-delete:hover:not(:disabled) { color:#ffbdc3; background:#772330; }
.template-edit { position:absolute; top:8px; left:42px; z-index:1; display:grid; place-items:center; width:28px; height:28px; padding:0; color:#eee; background:#101116d9; border:1px solid #ffffff25; border-radius:8px; }
.template-edit svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }
.template-edit:hover { background:#554284; color:white; }
.detail-content > section:not(.detail-inputs), .detail-facts { padding:12px; border:1px solid #ffffff0e; border-radius:12px; background:#ffffff06; }
.detail-section-head .text-button { padding:5px 8px; border:1px solid #ffffff20; border-radius:7px; font-size:10px; color:#eceaf3; }
.detail-actions { grid-template-columns:1fr; }
.detail-actions .primary, .detail-actions .secondary { font-size:11px; padding:11px 8px; border-radius:9px; }
#previewDownload { width:100%; background:#a792e0; border:1px solid #a792e0; color:#15121c; font-weight:700; }
#previewDownload:hover { background:#b8a5eb; border-color:#b8a5eb; }
.upload-status { color:#d6bbed; font-size:11px; line-height:1.5; overflow-wrap:anywhere; margin:8px 0 16px; }
.upload-status:empty { display:none; }
.editor-media { margin-bottom:12px; }
.editor-media .editor-video { display:block; margin:0; }
.editor-image-tile { position:relative; width:84px; height:84px; }
#editorImages .editor-image-tile img { display:block; width:100%; height:100%; }
.editor-image-tile .remove-media { top:4px; right:4px; width:22px; height:22px; }
@media(max-width:1150px) { .results-grid { columns:2; } }
@media(max-width:740px) { .results-grid { columns:2; column-gap:10px; } .result-body { padding:9px; } .result-actions { gap:4px; } .result-actions button:has(svg) { width:27px; height:27px; } .result-head strong { font-size:10px; } .result-bottom { flex-wrap:wrap; } .result-preview-open { font-size:10px; padding:7px; } }
@media(hover:none) { .result-preview-open { top:12px; right:8px; left:auto; transform:none; opacity:1; pointer-events:auto; } .result-landscape .result-preview-open { top:40px; } }
@media(prefers-reduced-motion:reduce) { .result-preview-open { transition:none; } }
.library-loading { display:flex; align-items:center; justify-content:center; gap:12px; min-height:250px; color:#a7a2b6; font-size:12px; column-span:all; }
.library-loading .request-loading-spinner { display:block; width:22px; height:22px; border-width:2px; }
.template video { min-height:0; object-fit:cover; }

.source-asset-button { position:relative; display:block; width:100%; aspect-ratio:1; padding:0; overflow:hidden; border-radius:8px; border:1px solid var(--line); }
.source-asset-button[aria-pressed="true"] { border-color:var(--accent); }
#previewDialog .source-asset-button video { width:100%; height:100%; margin:0; pointer-events:none; }
.source-asset-play { position:absolute; inset:0; display:grid; place-items:center; background:#0002; }
.source-asset-play svg { width:22px; height:22px; fill:white; stroke:white; filter:drop-shadow(0 1px 3px #000); }
.library-more { display:block; margin:14px auto; padding:10px 24px; }

/* Make the library easy to discover in every language. */
#templatesOpen { color:#e4d6ff; border-color:#b69bff65; background:linear-gradient(120deg,#ad8bf82b,#72bafb16); box-shadow:0 0 18px #9c76f51c,inset 0 1px 0 #ffffff15; }
#templatesOpen:hover, #templatesOpen:focus-visible { background:linear-gradient(120deg,#ad8bf847,#72bafb29); box-shadow:0 0 20px #9c76f538; border-color:#c6abff; }
#templatesOpen.active { color:#171123; background:linear-gradient(120deg,#b99af5,#91bdf9); border-color:#cfb8ff; box-shadow:0 0 20px #9c76f538,inset 0 1px 0 #ffffff40; }
#templatesOpen.active:hover, #templatesOpen.active:focus-visible { color:#171123; background:linear-gradient(120deg,#c8acf9,#a4cafb); border-color:#e2d3ff; }
#historyView:not([hidden]) { display:flex; flex-direction:column; }
#empty { flex:1; min-height:300px; }
#empty .empty-icon { color:#cfb5ff; border-color:#b69bff4d; background:linear-gradient(135deg,#b78aff22,#70baff14); box-shadow:0 0 28px #a782f51a; }
#empty h3 { font-size:20px; color:#f2ebff; }
#empty p { max-width:340px; color:#a6a0b2; line-height:1.7; }
#emptyLibrary { color:#f2ebff; border-color:#b69bff60; background:linear-gradient(120deg,#ad8bf835,#72bafb19); padding:11px 18px; }
#emptyLibrary:hover, #emptyLibrary:focus-visible { border-color:#c6abff; box-shadow:0 0 20px #9c76f530; }
.modes button { min-width:0; }
@media(max-width:740px) { .workspace-tabs { padding-left:12px; padding-right:12px; gap:6px; } .workspace-tabs button { padding:9px 10px; } #empty { min-height:260px; padding:24px 16px; } #empty h3 { font-size:18px; } }

/* Pack cards at their natural heights instead of leaving portrait-sized rows. */
.results-grid { --result-gap:16px; display:grid; columns:auto; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1px; grid-auto-flow:row dense; column-gap:16px; row-gap:0; align-items:start; }
.result { margin:0; grid-row-end:span var(--result-span,1); }
@media(max-width:1100px) { .results-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:740px) { .results-grid { --result-gap:10px; column-gap:10px; } }
/* Keep the shared site header identical to every other page (this page's own tokens and 13px base must not leak into it). */
#sharedHeader { --line: rgba(255,255,255,.11); --text: #f7f7fb; --muted: rgba(247,247,251,.62); font-size: 16px; line-height: 1.45; color: #f7f7fb; }

/* Model selection and visible download feedback on every viewport. */
.henshin-model-picker { display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:40px;min-height:0;padding:0 12px;border:1px solid #ffffff20;border-radius:10px;background:#191a20;color:#f4f4f7;margin:-6px 0 12px;font-size:12px;line-height:1.2; }
.henshin-model-picker>span:first-child { color:#a5a3ad; }
.henshin-model-picker strong { margin-left:auto;font-size:13px;font-weight:600; }
.henshin-model-picker>span:last-child { font-size:20px;margin-left:8px; }
.henshin-model-dialog { background:#191a20;color:#f4f4f7;border:1px solid #ffffff30;border-radius:14px;padding:14px;width:min(340px,90vw); }
.henshin-model-dialog::backdrop { background:#0009; }
.henshin-model-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px; }
.henshin-model-heading button { width:28px;height:28px;padding:0;font-size:18px; }
.henshin-model-dialog>[data-henshin-model] { display:flex;justify-content:space-between;align-items:center;width:100%;height:40px;min-height:0;padding:0 10px;border:1px solid #ffffff20;border-radius:9px;margin-top:8px;font-size:13px; }
.henshin-model-dialog>[aria-pressed=true] { border-color:#a792e0;background:#a792e022; }
.henshin-model-dialog button span { font-size:11px;color:#aaa; }
svg.download-spinner { display:block!important;width:20px!important;height:20px!important;flex:none;animation:henshin-download-spin .7s linear infinite!important; }
svg.download-spinner circle { fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:42 15; }
@keyframes henshin-download-spin { to { transform:rotate(360deg); } }
@media(max-width:740px),(hover:none) { .result-preview-open { display:none!important; } .result-actions [data-action=preview] { display:none; } }

button[aria-busy="true"] { opacity:1!important;cursor:wait; }