:root{--bg:#070a11;--panel:#121827;--panel2:#182033;--line:rgba(255,255,255,.10);--text:#f5f7fb;--muted:#9aa8bd;--accent:#7dd3fc;--accent2:#a78bfa;--danger:#fb7185;--ok:#34d399;--shadow:0 20px 60px rgba(0,0,0,.34)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 0 0,rgba(125,211,252,.16),transparent 30%),radial-gradient(circle at 100% 0,rgba(167,139,250,.14),transparent 30%),linear-gradient(180deg,#0b1020,#070a10 70%)}
.wrap{width:min(1500px,calc(100% - 32px));margin:0 auto;padding:18px 0 70px}.hero{padding:34px;border:1px solid var(--line);border-radius:30px;background:rgba(18,24,38,.88);box-shadow:var(--shadow);margin-bottom:16px}.eyebrow{color:var(--accent);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px}.simple-header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px}h1{font-size:clamp(30px,3.5vw,54px);margin:6px 0 4px;line-height:1.05}h2{margin:0 0 8px}h3{margin:0 0 10px}.back{color:var(--accent);text-decoration:none;font-weight:800}.muted{color:var(--muted)}.header-actions,.actions{display:flex;gap:8px;flex-wrap:wrap}.card,.status-card{background:rgba(18,24,38,.90);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow);backdrop-filter:blur(14px);margin-bottom:16px}.status-card{position:sticky;top:8px;z-index:20}.status-row{display:flex;align-items:center;gap:12px}.status{padding:7px 12px;border-radius:999px;font-weight:900;background:rgba(255,255,255,.10)}.status.done,.status.review,.status.voiceover_review,.status.prompts_review,.status.clips_review{color:var(--ok);background:rgba(52,211,153,.14)}.status.error{color:var(--danger);background:rgba(251,113,133,.16)}.status.generating,.status.processing{color:var(--accent);background:rgba(125,211,252,.14)}.status-text{display:flex;flex-direction:column;gap:3px}.status-text span{color:var(--muted);font-size:13px}.progress{height:10px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden;margin-top:12px}.progress>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s}.inline-error{margin-top:12px;color:#ffd6de;background:rgba(251,113,133,.10);border:1px solid rgba(251,113,133,.25);padding:10px 12px;border-radius:14px}.top-actions{position:sticky;top:106px;z-index:18;display:flex;gap:8px;flex-wrap:wrap;background:rgba(8,11,18,.92);border:1px solid var(--line);border-radius:20px;padding:10px;margin-bottom:16px;backdrop-filter:blur(16px)}.button{border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;font-weight:850;color:var(--text);background:rgba(255,255,255,.08)}.button:hover{background:rgba(255,255,255,.14)}.button.big,.button.accent{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#071018}.button.ghost{background:rgba(255,255,255,.045);color:var(--muted)}.button.small{padding:8px 10px;font-size:13px}.main-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:16px;align-items:start}.right-column{position:sticky;top:184px}.section-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px}.section-head span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,rgba(125,211,252,.18),rgba(167,139,250,.18));color:var(--accent);font-weight:950;flex:none}.section-head p{margin:4px 0 0;color:var(--muted);line-height:1.4}label{display:block;color:var(--muted);font-size:13px;font-weight:800;margin:12px 0}input,textarea,select{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.055);color:var(--text);padding:12px 13px;font:inherit;outline:none}textarea{resize:vertical;line-height:1.5}.blocks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.block-card{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:20px;padding:14px}.block-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.block-card textarea{min-height:210px;font-size:16px;background:rgba(255,255,255,.07)}.hint{color:var(--muted);padding:10px 12px;border-radius:14px;border:1px solid rgba(125,211,252,.18);background:rgba(125,211,252,.075)}audio,video,img{width:100%;display:block;border-radius:16px;border:1px solid var(--line)}.placeholder{display:grid;place-items:center;min-height:150px;border:1px dashed rgba(255,255,255,.18);border-radius:16px;color:var(--muted);background:rgba(255,255,255,.025);text-align:center}.placeholder.small{min-height:110px}.clip-prompt-list{display:grid;gap:10px}.clip-prompt{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025);padding:12px}.clip-prompt summary{cursor:pointer;color:var(--accent);font-weight:900}.clip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.clip-item{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025);padding:14px}.final-video{margin-top:14px;max-height:760px;object-fit:contain;background:#000}.info-box{margin-top:12px;padding:12px 14px;border:1px solid rgba(125,211,252,.20);border-radius:14px;background:rgba(125,211,252,.075);line-height:1.45}.side-card{padding:16px}.slider-stack label{padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.slider-stack input[type=range]{padding:0}.range-value{color:var(--accent);display:inline-block;min-width:42px}.thumb{margin:8px 0 12px;max-height:220px;object-fit:contain;background:#000}.log-box{max-height:520px;overflow:auto;display:grid;gap:8px}.log-item{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);padding:10px}.log-time{font-size:12px;color:var(--muted);margin-bottom:4px}.error-card{border-color:rgba(251,113,133,.28)}pre,.error-pre{white-space:pre-wrap;word-break:break-word;border-radius:14px;padding:12px;background:rgba(0,0,0,.30);color:#ffd5dd}.jobs{display:grid;gap:10px}.job-row{display:flex;justify-content:space-between;gap:12px;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.03)}.job-row span{color:var(--muted)}.upload-card form{display:grid;gap:12px}.card{scroll-margin-top:180px}@media(max-width:1180px){.main-layout{grid-template-columns:1fr}.right-column{position:static}.clip-grid,.blocks-grid{grid-template-columns:1fr}}@media(max-width:760px){.simple-header{display:block}.top-actions{top:8px}.status-card{position:static}.block-head{display:block}.block-card textarea{min-height:180px}}


/* v10.5 voice select fix */
select,
.voice-select {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}

select option,
.voice-select option {
  background: #ffffff !important;
  color: #111827 !important;
}

select:focus,
.voice-select:focus {
  outline: 2px solid rgba(14, 165, 233, 0.45);
  outline-offset: 2px;
}


/* v11.1 LLM selector */
.llm-select {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
}
.llm-select option {
  background: #ffffff !important;
  color: #111827 !important;
}

.auth-wrap{max-width:520px}.auth-card{margin-top:12vh}.auth-card h1{margin-top:0}

/* v12.3 anchor / reference preview */
.reference-panel{border:1px solid rgba(125,211,252,.20);background:rgba(125,211,252,.065);border-radius:18px;padding:14px;margin:0 0 14px}
.reference-panel h3{margin:0 0 6px}.large-thumb{max-height:420px}.image-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* v12.5 scene start frames */
.start-frame-box{border:1px solid rgba(167,139,250,.22);background:rgba(167,139,250,.055);border-radius:16px;padding:12px;margin:12px 0}
.start-frame-box .large-thumb{max-height:520px;object-fit:contain;background:#000}
.clip-prompt textarea[name$="_image_prompt_en"]{background:rgba(125,211,252,.06);border-color:rgba(125,211,252,.22)}


/* v5.1 Clean UI */
:root {
  --ui-gap: 18px;
  --ui-radius: 18px;
  --ui-border: rgba(255,255,255,.10);
  --ui-card: rgba(255,255,255,.045);
  --ui-card-strong: rgba(255,255,255,.075);
  --ui-text-soft: rgba(255,255,255,.72);
}

.wrap { max-width: 1480px; }

.simple-header {
  gap: 18px;
  align-items: flex-start;
}

.header-actions,
.top-actions.clean-top-actions,
.actions,
.clip-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.header-actions { justify-content: flex-end; }

.top-actions.clean-top-actions {
  position: sticky;
  top: 10px;
  z-index: 20;
  padding: 12px;
  margin: 14px 0 20px;
  border-radius: 18px;
  border: 1px solid rgba(88,166,255,.22);
  background: linear-gradient(135deg, rgba(56,139,253,.14), rgba(255,255,255,.055));
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 42px rgba(0,0,0,.20);
}

.main-layout { gap: 22px; align-items: start; }

.primary-column,
.secondary-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card {
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
  background: linear-gradient(180deg, var(--ui-card-strong), var(--ui-card));
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}

.clean-mode-panel {
  border: 1px solid rgba(88,166,255,.24);
  background: linear-gradient(135deg, rgba(56,139,253,.12), rgba(255,255,255,.04));
}

.mode-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
}

.switch-line,
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 800;
}

.switch-line input,
.check-row input {
  width: 18px;
  height: 18px;
  accent-color: #58a6ff;
}

.upload-video-option {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 14px;
  background: rgba(52, 211, 153, 0.08);
}

.upload-video-option .check-row {
  align-items: flex-start;
}

.upload-video-option .check-row input {
  margin-top: 3px;
  flex-shrink: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}

.button:hover { transform: translateY(-1px); }

.button.big {
  min-height: 50px;
  padding: 13px 18px;
  border-radius: 15px;
  font-size: 15px;
}

.button.small {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 11px;
  font-size: 13px;
}

.button.primary {
  background: linear-gradient(135deg, #2f81f7, #58a6ff);
  color: #fff;
  box-shadow: 0 10px 26px rgba(47,129,247,.28);
}

.button.ghost {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ui-border);
}

.section-head {
  gap: 14px;
  align-items: flex-start;
}

.section-head span {
  min-width: 52px;
  text-align: center;
  border-radius: 999px;
}

.section-head h2 { margin-bottom: 4px; }

.section-head p,
.muted { color: var(--ui-text-soft); }

.clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.clip-item {
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--ui-border);
  background: rgba(0,0,0,.14);
}

.clip-item h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.clip-segment {
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(125, 211, 252, 0.10);
  border-left: 3px solid var(--accent, #7dd3fc);
  color: #e2eaf5;
  font-size: 13px;
  line-height: 1.4;
}

.tts-tags-panel {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--ui-border, rgba(255,255,255,.10));
  background: rgba(0,0,0,.16);
}
.tts-tags-panel > summary {
  cursor: pointer;
  font-weight: 700;
  color: #e2eaf5;
  list-style: none;
}
.tts-tags-panel .tag-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 10px 0;
}
.tts-tags-panel .tag-group-label {
  font-size: 12px;
  color: var(--muted, #9aa7bd);
  min-width: 96px;
  font-weight: 700;
}
.tag-chip {
  cursor: pointer;
  border: 1px solid rgba(125, 211, 252, 0.30);
  background: rgba(125, 211, 252, 0.08);
  color: #e2eaf5;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  transition: background .15s, transform .05s;
}
.tag-chip:hover { background: rgba(125, 211, 252, 0.20); }
.tag-chip:active { transform: scale(0.96); }

.draft-card { border-color: rgba(250, 204, 21, 0.30); }
.draft-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin: 8px 0 14px;
}
.draft-item {
  border-radius: 14px;
  padding: 13px 14px;
  border: 1px solid var(--ui-border, rgba(255,255,255,.10));
  background: rgba(0,0,0,.16);
}
.draft-no {
  font-weight: 800;
  color: var(--accent, #7dd3fc);
  margin-bottom: 6px;
}
.draft-idea {
  margin: 8px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #e2eaf5;
}

.clip-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.clip-move { display: flex; gap: 5px; }
.button.tiny {
  padding: 3px 10px;
  font-size: 15px;
  line-height: 1;
  border-radius: 8px;
}
.button.tiny:disabled { opacity: 0.35; cursor: not-allowed; }
.button.tiny.danger { border-color: rgba(248,113,113,.45); color: #fca5a5; }
.button.tiny.danger:hover { background: rgba(248,113,113,.15); }

.clip-length {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(167, 139, 250, 0.07);
  border: 1px solid rgba(167, 139, 250, 0.20);
}
.clip-length-label { font-size: 12px; color: var(--muted, #9aa7bd); }
.clip-length input[type="number"] { width: 74px; padding: 4px 7px; }
.clip-length-note { font-size: 12px; color: #c4b5fd; font-weight: 700; }

.clip-audio {
  margin: 8px 0 4px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(125, 211, 252, 0.07);
  border: 1px solid rgba(125, 211, 252, 0.20);
}
.clip-audio-label {
  display: block;
  font-size: 12px;
  color: var(--muted, #9aa7bd);
  margin-bottom: 5px;
}
.clip-audio audio { width: 100%; height: 34px; }

.clip-regen-field {
  display: block;
  margin: 10px 0 8px;
  font-size: 12px;
  color: var(--muted, #9aa7bd);
}

.clip-regen-field textarea {
  margin-top: 4px;
  width: 100%;
  resize: vertical;
  background: rgba(250, 204, 21, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: 10px;
  color: #f1f5f9;
  padding: 8px 10px;
  font: inherit;
}

.clip-item video,
.clip-media7 video,
.final-video {
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
/* Маленькие превью-клипы, чтобы не занимали всю страницу (вертикаль 9:16). */
.clip-item video,
.clip-media7 video {
  width: 100%;
  max-width: 170px;
  height: auto;
  display: block;
}

.info-box {
  border-radius: 14px;
  border: 1px solid var(--ui-border);
  background: rgba(0,0,0,.13);
}

@media (max-width: 900px) {
  .top-actions.clean-top-actions {
    position: static;
  }
  .header-actions,
  .top-actions.clean-top-actions,
  .actions,
  .clip-actions-bar,
  .mode-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .button { width: 100%; }
}

/* ===== Step wizard (project page) ===== */
.wizard { display: flex; gap: 18px; align-items: flex-start; }
.wizard-nav {
  flex: 0 0 230px;
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(18,24,38,.92);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  box-shadow: var(--shadow);
  z-index: 15;
}
.wizard-nav-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 4px;
  padding-left: 6px;
}
.step-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: #e6edf7;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  width: 100%;
  transition: background .15s, border-color .15s;
}
.step-link:hover { background: rgba(125,211,252,.08); }
.step-link.active { background: rgba(125,211,252,.16); border-color: rgba(125,211,252,.5); }
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(125,211,252,.18);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  flex: 0 0 24px;
}
.step-link.active .step-num { background: var(--accent); color: #0b1220; }

.wizard-content { flex: 1; min-width: 0; }
.wizard-content .primary-column,
.wizard-content .right-column { display: block; width: 100%; gap: 0; }
/* Cards are shown one step at a time; JS reveals the active step. Default hidden avoids flash. */
.wizard-content .card[data-step] { display: none; }

@media (max-width: 900px) {
  .wizard { flex-direction: column; }
  .wizard-nav {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    flex: none;
  }
  .wizard-nav-title { display: none; }
  .step-link { width: auto; white-space: nowrap; }
}

/* --- Per-clip workbench (step «Промты») --- */
.kling-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--ui-border, rgba(255,255,255,.10));
  border-radius: 14px;
  background: var(--ui-card, rgba(255,255,255,.045));
}
.kling-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, #9aa7bd); }
.kling-field select { min-width: 220px; }
.kling-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.workbench-list { display: flex; flex-direction: column; gap: 14px; }
.workbench-item {
  padding: 14px;
  border: 1px solid var(--ui-border, rgba(255,255,255,.10));
  border-radius: 16px;
  background: var(--ui-card, rgba(255,255,255,.045));
}
.wb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wb-no { font-weight: 900; color: var(--accent, #7dd3fc); }
.wb-badge {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--ui-border, rgba(255,255,255,.10));
  color: var(--muted, #9aa7bd);
}
.wb-badge.ok { color: #07120c; background: var(--ok, #34d399); border-color: transparent; }
.wb-badge.warn { color: #1a1206; background: #fbbf24; border-color: transparent; }
.wb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.wb-video { width: 100%; max-width: 170px; border-radius: 12px; margin-top: 8px; display: block; }
.clip-error {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--danger, #fb7185);
  background: rgba(251,113,133,.12);
  border: 1px solid rgba(251,113,133,.3);
}
@media (max-width: 720px){
  .kling-field select { min-width: 0; width: 100%; }
  .kling-bar-actions { margin-left: 0; width: 100%; }
}

/* блок публикации в Instagram (рилсы) */
.pubbox{margin-top:16px;padding:14px 16px;border:1px solid var(--border,#2a313b);border-radius:12px;background:rgba(127,127,127,.05)}
.pubbox b{display:block;margin-bottom:10px}
.pub-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.pub-row span{min-width:80px;color:var(--muted,#97a1ae);font-size:14px}
.pub-row select,.pub-row input{flex:1;max-width:340px}
.pub-check{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:14px}