:root{--bg:#0b1020;--panel:#131a2c;--panel2:#182238;--text:#eef2ff;--muted:#99a6c4;--line:#29334a;--accent:#8afc5b;--danger:#ff6b7c;--warning:#ffd166;--success:#6ee7b7}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#08101f,#0d1425 55%,#0a1020);color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}a{color:#b8c7ff;text-decoration:none}a:hover{text-decoration:underline}.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-bottom:1px solid var(--line);background:rgba(8,13,27,.88);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}.brand{color:var(--text);font-size:18px;font-weight:800}.topbar nav{display:flex;gap:20px;align-items:center}.container{max-width:1180px;margin:34px auto;padding:0 20px}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}h1{font-size:30px;margin:0 0 5px}h2{font-size:18px;margin:22px 0 10px}p{color:var(--muted)}.card{background:linear-gradient(180deg,var(--panel),#11182a);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.22);margin-bottom:18px}.auth-card{max-width:430px;margin:9vh auto}.auth-card h1{margin-bottom:22px}label{display:flex;flex-direction:column;gap:7px;font-weight:650;color:#dbe4ff}input,textarea,select{width:100%;background:#0a1120;border:1px solid #35405b;color:var(--text);border-radius:9px;padding:11px 12px;font:inherit}textarea{resize:vertical}input:focus,textarea:focus,select:focus{outline:2px solid rgba(138,252,91,.26);border-color:var(--accent)}small{font-weight:400;color:var(--muted)}button,.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #3a4662;border-radius:9px;padding:10px 14px;background:#202a43;color:var(--text);font-weight:750;cursor:pointer;text-decoration:none}.button:hover{text-decoration:none;filter:brightness(1.08)}.primary{background:var(--accent);border-color:var(--accent);color:#07100a}.danger-button{background:transparent;border-color:#7b3544;color:#ffabb5}.link-button{border:0;background:none;padding:0;color:#b8c7ff}.inline-form{display:inline}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.span-2{grid-column:1/-1}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.check-stack{display:flex;flex-direction:column;gap:10px;padding-top:29px}.check-stack label{display:flex;flex-direction:row;align-items:center;font-weight:500}.check-stack input{width:auto}.media-panel{background:var(--panel2);border:1px solid var(--line);padding:18px;border-radius:12px}.media-panel h2{margin-top:0}.note{margin-top:15px;color:var(--muted);border-left:3px solid var(--warning);padding:8px 12px;background:rgba(255,209,102,.06)}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.alert{padding:12px 14px;border-radius:10px;border:1px solid var(--line);margin-bottom:16px}.alert.danger{background:rgba(255,107,124,.1);border-color:#6f3341;color:#ffd8dd}.alert.warning{background:rgba(255,209,102,.1);border-color:#66562b;color:#ffe8a5}.alert.success{background:rgba(110,231,183,.1);border-color:#2d6654;color:#bff7e3}.table-wrap{overflow-x:auto;padding:0}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}tr:last-child td{border-bottom:0}.empty{text-align:center;color:var(--muted);padding:36px}.status{display:inline-block;padding:4px 9px;border-radius:999px;background:#28324b;color:#dbe4ff;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.status.succeeded{background:rgba(110,231,183,.15);color:var(--success)}.status.failed,.status.failed_local,.status.expired{background:rgba(255,107,124,.14);color:#ffabb5}.status.running,.status.queued,.status.preparing{background:rgba(255,209,102,.14);color:#ffe09a}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.small{font-size:12px}.job-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.job-status-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}dl{display:grid;grid-template-columns:100px 1fr;gap:9px;margin:18px 0}dt{color:var(--muted)}dd{margin:0}.prompt-box{white-space:pre-wrap;background:#0a1120;padding:14px;border-radius:10px;color:#dbe4ff}.asset-list{list-style:none;padding:0;margin:0}.asset-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}.asset-list span{color:var(--muted);font-size:12px}pre{white-space:pre-wrap;word-break:break-word;background:#08101e;border-radius:10px;padding:15px;max-height:520px;overflow:auto}.hidden{display:none!important}@media(max-width:780px){.topbar{padding:14px 16px}.topbar nav{gap:12px}.container{margin-top:22px}.form-grid,.two-cols,.job-layout{grid-template-columns:1fr}.span-2{grid-column:auto}.page-head{flex-direction:column}.table-wrap{font-size:13px}}

/* Drag-and-drop upload interface */

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

.media-panel-head h2 {
  margin: 0 0 4px;
}

.media-panel-head p {
  margin: 0;
}

.drop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.upload-card {
  min-width: 0;
  padding: 16px;
  background: #10182a;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.upload-card:first-child {
  grid-column: 1 / -1;
}

.upload-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.upload-card-head h3 {
  margin: 0 0 3px;
  font-size: 15px;
}

.upload-card-head p {
  margin: 0;
  font-size: 12px;
}

.file-counter {
  flex: 0 0 auto;
  padding: 3px 9px;
  color: #cbd6f4;
  background: #222d46;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.drop-zone {
  position: relative;
  display: flex;
  min-height: 150px;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  cursor: pointer;
  background: rgba(7, 14, 28, 0.58);
  border: 2px dashed #465572;
  border-radius: 13px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.drop-zone:hover,
.drop-zone:focus-visible {
  background: rgba(138, 252, 91, 0.055);
  border-color: var(--accent);
  outline: none;
}

.drop-zone.is-dragging {
  background: rgba(138, 252, 91, 0.12);
  border-color: var(--accent);
  transform: scale(1.008);
}

.drop-zone.has-files {
  min-height: 110px;
}

.drop-zone.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.drop-zone strong {
  font-size: 15px;
}

.drop-zone span:not(.drop-zone-icon) {
  color: var(--muted);
  font-size: 12px;
}

.drop-zone-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 3px;
  place-items: center;
  color: var(--accent);
  background: #202b43;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 900;
}

/* Hide the browser's normal Choose File button */
.native-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.drop-error {
  min-height: 20px;
  padding-top: 6px;
  color: #ffabb5;
  font-size: 12px;
}

.selected-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selected-file {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px;
  background: #0a1120;
  border: 1px solid #2c3750;
  border-radius: 11px;
}

.file-preview {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  color: #cbd6f4;
  background: #202b43;
  border-radius: 8px;
  font-size: 22px;
}

.file-preview img,
.file-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.file-meta strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta span {
  color: var(--muted);
  font-size: 11px;
}

.remove-file {
  padding: 6px 9px;
  color: #ffabb5;
  background: transparent;
  border-color: #603443;
  font-size: 11px;
}

.url-inputs {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.url-inputs summary {
  color: #cbd6f4;
  cursor: pointer;
  font-weight: 750;
}

.url-input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

button:disabled {
  cursor: wait;
  opacity: 0.6;
}

@media (max-width: 780px) {
  .drop-grid,
  .url-input-grid {
    grid-template-columns: 1fr;
  }

  .upload-card:first-child {
    grid-column: auto;
  }

  .selected-file {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .file-preview {
    width: 46px;
    height: 46px;
  }

  .remove-file {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* Job card grid */

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.jobs-empty {
  grid-column: 1 / -1;
}

.job-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  background: linear-gradient(
    180deg,
    var(--panel),
    #101727
  );
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}

.job-card-preview {
  position: relative;
  display: block;
  height: 190px;
  overflow: hidden;
  background: #070d19;
  border-bottom: 1px solid var(--line);
}

.job-card-preview:hover {
  text-decoration: none;
}

.job-card-preview img,
.job-card-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #070d19;
}

.job-card-placeholder {
  display: grid;
  height: 100%;
  place-items: center;
  color: #44516c;
  background: radial-gradient(
    circle at 50% 35%,
    #1c2942,
    #080e1b 70%
  );
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.preview-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: white;
  background: rgba(5, 10, 20, 0.72);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.job-card-status {
  position: absolute;
  top: 10px;
  right: 10px;
}

.job-card-body {
  display: flex;
  padding: 15px;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

.job-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.job-card-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 850;
}

.job-card-date {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.job-card-prompt {
  display: -webkit-box;
  min-height: 84px;
  margin: 0;
  overflow: hidden;
  color: #d8e0f5;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.job-card-details {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 6px 8px;
  margin: 0;
  font-size: 11px;
}

.job-card-details dt {
  color: var(--muted);
}

.job-card-details dd {
  overflow: hidden;
  color: #d9e1f5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card-error {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #ffabb5;
  font-size: 11px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.job-card-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 12px 15px 15px;
  border-top: 1px solid var(--line);
}

.job-card-actions .button {
  padding: 8px 7px;
  font-size: 11px;
}

.rerun-button {
  color: #dfffbc;
  background: rgba(138, 252, 91, 0.08);
  border-color: #667a35;
}

.disabled-button {
  cursor: not-allowed;
  opacity: 0.38;
  pointer-events: none;
}

.reuse-check {
  display: flex;
  margin-bottom: 14px;
  flex-direction: row;
  align-items: center;
  gap: 9px;
}

.reuse-check input {
  width: auto;
}

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

.reuse-asset {
  display: flex;
  min-width: 0;
  padding: 8px;
  align-items: center;
  gap: 9px;
  background: #0a1120;
  border: 1px solid #2c3750;
  border-radius: 10px;
}

.reuse-asset:hover {
  text-decoration: none;
  border-color: #556584;
}

.reuse-asset img,
.reuse-asset-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  object-fit: cover;
  color: #dce5ff;
  background: #1d2941;
  border-radius: 7px;
  font-size: 20px;
}

.reuse-asset > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.reuse-asset strong,
.reuse-asset small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .jobs-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .jobs-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 540px) {
  .jobs-grid,
  .reuse-assets-grid {
    grid-template-columns: 1fr;
  }
}
EOF
.character-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.character-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.character-preview {
  height: 230px;
  background: #070d19;
}

.character-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-placeholder {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--muted);
}

.character-card-body {
  padding: 15px;
  flex: 1;
}

.character-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.character-title-row h2 {
  margin: 0;
  font-size: 18px;
}

.character-details {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 7px;
  margin-top: 15px;
  font-size: 12px;
}

.character-details dt {
  color: var(--muted);
}

.character-details dd {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 15px 15px;
  border-top: 1px solid var(--line);
}

.character-actions form,
.character-actions button {
  width: 100%;
}

.character-select-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.form-character-preview img {
  display: block;
  width: 180px;
  max-height: 240px;
  object-fit: cover;
  border-radius: 12px;
}

.inline-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.inline-check input {
  width: auto;
}

@media (max-width: 1050px) {
  .character-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .character-grid,
  .character-select-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .character-grid,
  .character-select-grid {
    grid-template-columns: 1fr;
  }
}