/* Seedance Studio: dunkles Studio, Bernstein als Licht für Aktion und Aufnahme */
:root {
  --night: #131826;      /* Grund */
  --panel: #1a2031;      /* Flächen */
  --raise: #232b40;      /* erhobene Elemente, Kacheln */
  --line: #2e3753;       /* Linien */
  --text: #ece8e1;       /* warmes Weiß */
  --muted: #949cb2;
  --amber: #f2a93b;      /* Akzent: Aktion, Auswahl */
  --amber-ink: #22160a;
  --ok: #7fd3a8;
  --err: #ff8f7d;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: wait; opacity: .55; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.ghost { color: var(--muted); padding: 6px 2px; font-size: 14px; }
.ghost:hover { color: var(--text); }
.primary, .generate {
  background: var(--amber); color: var(--amber-ink); font-weight: 650;
  border-radius: var(--r-md); padding: 12px 18px;
}
.primary:hover, .generate:hover:not(:disabled) { background: #f7b955; }
.msg { margin: 0; min-height: 1.3em; color: var(--err); font-size: 14px; }
.hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* Anmeldung */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-box {
  width: min(380px, 100%); display: grid; gap: 16px; padding: 32px 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.login-box h1 { margin: 0 0 4px; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.login-mark { display: flex; gap: 4px; align-items: end; height: 26px; }
.login-mark span { width: 5px; border-radius: 3px; background: var(--amber); }
.login-mark span:nth-child(1) { height: 40%; } .login-mark span:nth-child(2) { height: 85%; }
.login-mark span:nth-child(3) { height: 60%; } .login-mark span:nth-child(4) { height: 100%; }
.login-mark span:nth-child(5) { height: 45%; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.field input {
  background: var(--night); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 15px;
}
.field input:focus { border-color: var(--amber); outline: none; }

/* Rahmen */
.top {
  display: flex; align-items: center; gap: 20px; padding: 14px 28px;
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 650; margin-right: auto; letter-spacing: -.01em; }
.mock {
  font-size: 12.5px; color: var(--amber); border: 1px solid rgba(242, 169, 59, .45);
  padding: 3px 10px; border-radius: 99px;
}
.budget { display: grid; gap: 5px; justify-items: end; }
.budget-text { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.budget-bar { width: 140px; height: 3px; background: var(--raise); border-radius: 2px; overflow: hidden; }
.budget-bar span { display: block; height: 100%; width: 0; background: var(--amber); }
.budget-bar.full span { background: var(--err); }

.layout {
  display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 28px;
  padding: 24px 28px 48px; max-width: 1720px; margin: 0 auto; align-items: start;
}

/* Bedienfeld */
.panel {
  position: sticky; top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}

.model-card {
  position: relative; display: grid; gap: 2px; padding: 18px 18px 16px; overflow: hidden;
  border-radius: var(--r-md); cursor: pointer;
  background: linear-gradient(160deg, #2a2440 0%, #1e2438 55%, #1b2133 100%);
  border: 1px solid #3a3558;
}
.model-card select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.model-name { font-size: 21px; font-weight: 700; letter-spacing: -.015em; position: relative; }
.model-sub { font-size: 13px; color: var(--muted); position: relative; max-width: calc(100% - 120px); }
.model-switch {
  position: absolute; top: 14px; right: 14px; font-size: 12.5px; color: var(--text);
  background: rgba(19, 24, 38, .6); padding: 3px 10px; border-radius: 99px;
}
.model-card:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
/* Tonspur als Erkennungszeichen: Balken, die an Audio erinnern */
.wave {
  position: absolute; right: 0; bottom: 0; width: 132px; height: 46px; opacity: .5;
  background:
    repeating-linear-gradient(90deg, var(--amber) 0 3px, transparent 3px 9px);
  -webkit-mask: linear-gradient(to top, #000, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V44L12 30L24 46L36 18L48 40L60 10L72 36L84 22L96 48L108 14L120 34L132 26L144 50L156 20L168 42L180 32L200 46V64Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to top, #000, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V44L12 30L24 46L36 18L48 40L60 10L72 36L84 22L96 48L108 14L120 34L132 26L144 50L156 20L168 42L180 32L200 46V64Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask-composite: intersect;
}

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--night); padding: 4px; border-radius: var(--r-md); }
.mode-tab { font-size: 13px; padding: 7px 6px; border-radius: var(--r-sm); color: var(--muted); white-space: nowrap; }
.mode-tab:hover { color: var(--text); }
.mode-tab[aria-selected="true"] { background: var(--raise); color: var(--text); }

.material { background: var(--night); border-radius: var(--r-md); padding: 12px; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px dashed var(--line); border-radius: var(--r-md); cursor: pointer; background: var(--panel);
  transition: border-color .15s;
}
.slot:hover, .slot.drag { border-color: var(--amber); }
.slot:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.slot.filled { border-style: solid; border-color: var(--line); }
.slot-empty { display: grid; justify-items: center; gap: 2px; font-size: 13px; color: var(--muted); pointer-events: none; text-align: center; }
.plus { font-size: 22px; line-height: 1; color: var(--text); }
.slot-small { aspect-ratio: auto; height: 64px; margin-top: 10px; }
.audio-info { display: grid; gap: 4px; padding: 10px; width: 100%; pointer-events: none; text-align: center; }
.audio-bars {
  height: 28px; margin: 0 6px 4px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 3px, transparent 3px 7px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14L6 8L12 18L18 4L24 20L30 10L36 24L42 6L48 16L54 2L60 22L66 9L72 19L78 5L84 17L90 11L100 14L90 17L84 11L78 23L72 9L66 19L60 6L54 26L48 12L42 22L36 4L30 18L24 8L18 24L12 10L6 20Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14L6 8L12 18L18 4L24 20L30 10L36 24L42 6L48 16L54 2L60 22L66 9L72 19L78 5L84 17L90 11L100 14L90 17L84 11L78 23L72 9L66 19L60 6L54 26L48 12L42 22L36 4L30 18L24 8L18 24L12 10L6 20Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.audio-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-len { font-size: 13px; color: var(--amber); font-variant-numeric: tabular-nums; }
.audio-len.bad { color: var(--err); }
.assets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 12px; }
.assets-label { font-size: 13px; color: var(--muted); }
.asset-row { display: flex; gap: 6px; }
.asset-row input {
  flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 14px;
}
.asset-row input:focus { border-color: var(--amber); outline: none; }
.asset-row button { background: var(--raise); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13.5px; }
.asset-row button:hover { background: #2c3550; }
.asset-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.asset-list:empty { display: none; }
.asset-list li { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 6px 6px 8px; }
.asset-tag { font-size: 11.5px; font-weight: 600; color: var(--amber); }
.asset-id { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-remove { width: 24px; height: 24px; border-radius: 50%; color: var(--muted); font-size: 16px; line-height: 1; }
.asset-remove:hover { background: var(--err); color: var(--amber-ink); }
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.photos:empty { display: none; }
.photos figure { margin: 0; position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--panel); }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos figcaption {
  position: absolute; left: 5px; bottom: 5px; font-size: 11.5px; font-weight: 600;
  background: rgba(19, 24, 38, .8); padding: 1px 6px; border-radius: 4px;
}
.photo-remove {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(19, 24, 38, .8); color: var(--text); font-size: 16px; line-height: 1;
  display: grid; place-items: center;
}
.photo-remove:hover { background: var(--err); color: var(--amber-ink); }
.audio-remove { font-size: 13px; padding: 6px 0 0; }
.prompt-box { background: var(--night); border-radius: var(--r-md); border: 1px solid transparent; }
.prompt-box:focus-within { border-color: var(--line); }
.prompt-box textarea {
  display: block; width: 100%; resize: vertical; min-height: 128px; border: 0; background: transparent;
  padding: 12px 12px 6px; font-size: 15px; line-height: 1.5;
}
.prompt-box textarea:focus { outline: none; }
.prompt-box textarea::placeholder { color: #69718a; }
.prompt-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 10px; align-items: center; }
.inserts { display: flex; gap: 6px; margin-right: auto; flex-wrap: wrap; }
.insert, .toggle {
  font-size: 12.5px; padding: 4px 10px; border-radius: 99px; background: var(--raise); color: var(--text);
}
.insert:hover { background: #2c3550; }
.toggle { color: var(--muted); }
.toggle[aria-pressed="true"] { color: var(--amber); background: rgba(242, 169, 59, .12); }
.toggle::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; opacity: .4; vertical-align: 1px; }
.toggle[aria-pressed="true"]::before { opacity: 1; }

.tiles { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr); gap: 8px; }
.tile {
  position: relative; display: grid; gap: 1px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--raise); cursor: pointer;
}
.tile:hover { background: #2a3350; }
.tile:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.tile select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.tile select:disabled { cursor: default; }
.tile-label { font-size: 12.5px; color: var(--muted); }
.tile-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-value small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.tile.locked { background: var(--panel); border: 1px solid var(--line); cursor: default; }

.generate { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; padding: 14px 18px; }
.generate-cost { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: .8; }

/* Aufträge */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar h2 { margin: 0 auto 0 0; font-size: 18px; font-weight: 650; }
.count { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.segmented { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; }
.segmented button { font-size: 13px; padding: 5px 12px; border-radius: var(--r-sm); color: var(--muted); }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--raise); color: var(--text); }

.jobs { display: grid; gap: 18px; }
.job {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; align-content: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.stage {
  position: relative; display: grid; place-items: center; background: #0d111b;
  aspect-ratio: 16 / 9; max-height: 72vh; min-height: 220px; grid-template-columns: minmax(0, 1fr);
}
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.stage .placeholder { display: grid; justify-items: center; gap: 10px; color: var(--muted); font-size: 14px; text-align: center; padding: 20px; }
.stage .elapsed { font-variant-numeric: tabular-nums; color: var(--text); font-size: 15px; }
.stage.busy::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: scan 1.8s linear infinite;
}
@keyframes scan { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.details { display: grid; min-width: 0; align-content: start; gap: 12px; padding: 16px 18px; border-left: 1px solid var(--line); }
.details-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.status { font-size: 12.5px; padding: 2px 10px; border-radius: 99px; background: var(--raise); color: var(--muted); }
.status.ok { color: var(--ok); background: rgba(127, 211, 168, .1); }
.status.fail { color: var(--err); background: rgba(255, 143, 125, .1); }
.status.busy { color: var(--amber); background: rgba(242, 169, 59, .12); }
.model { font-size: 13px; color: var(--muted); }
.prompt { margin: 0; font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.prompt.open { -webkit-line-clamp: unset; display: block; }
.more { justify-self: start; font-size: 13px; padding: 0; margin-top: -6px; }
.inputs { display: flex; gap: 8px; align-items: center; }
.inputs:empty { display: none; }
.inputs img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.inputs .tag { font-size: 12.5px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li { font-size: 12.5px; padding: 3px 9px; border-radius: var(--r-sm); background: var(--raise); font-variant-numeric: tabular-nums; }
.err { margin: 0; font-size: 13.5px; color: var(--err); background: rgba(255, 143, 125, .08); padding: 8px 10px; border-radius: var(--r-sm); }
.foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 10px; flex-wrap: nowrap; white-space: nowrap; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.primary-link { color: var(--amber); font-size: 13px; font-weight: 600; text-decoration: none; }
.primary-link:hover { text-decoration: underline; }
.actions .ghost { font-size: 13px; }
.del { margin-left: auto; }
.del:hover { color: var(--err); }

/* Rasteransicht */
.jobs.grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.jobs.grid .job { grid-template-columns: minmax(0, 1fr); }
.jobs.grid .stage { max-height: 340px; min-height: 0; }
.jobs.grid .details { border-left: 0; border-top: 1px solid var(--line); gap: 10px; }
.jobs.grid .prompt { -webkit-line-clamp: 2; }
.jobs.grid .inputs, .jobs.grid .more { display: none; }
.jobs.grid .actions { flex-wrap: wrap; row-gap: 4px; }

.empty { color: var(--muted); padding: 48px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty p { margin: 0 auto; max-width: 46ch; }
.empty-title { color: var(--text); font-size: 17px; font-weight: 600; margin-bottom: 6px !important; }

@media (max-width: 1100px) {
  .job { grid-template-columns: minmax(0, 1fr); }
  .details { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 20px; }
  .panel { position: static; max-height: none; }
  .top { padding: 12px 14px; gap: 12px; flex-wrap: wrap; }
  .budget { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .stage.busy::after { animation: none; background: var(--amber); opacity: .5; }
  .slot { transition: none; }
}