/* v22 Animation Studio (full screen, below modals so payment and dialogs open on top) */
.anim-studio { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--bg); color: var(--text); direction: rtl; }
.anim-studio[hidden] { display: none; }
body.anim-open { overflow: hidden; }
.an-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel-solid); min-height: 56px; }
.an-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; white-space: nowrap; }
.an-brand .i { color: var(--accent); }
.an-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--muted); font-size: 13px; }
.an-crumbs a { cursor: pointer; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.an-crumbs a:hover { color: var(--text); }
.an-crumbs i { font-style: normal; opacity: .5; }
.an-credits { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gold); white-space: nowrap; }
.an-body { flex: 1; overflow: auto; padding: 20px; }
.an-center { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.an-progress { max-width: 520px; margin: 0 auto; }
.an-bar { width: 100%; height: 8px; border-radius: 99px; background: var(--card); overflow: hidden; }
.an-bar.sm { height: 4px; margin-top: 6px; }
.an-bar i { display: block; height: 100%; background: var(--grad); transition: width .6s; }
.an-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.an-h { font-size: 14px; margin: 18px 0 10px; color: var(--muted); font-weight: 600; }
.an-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px; }
.an-hero { max-width: 860px; margin: 0 auto 10px; padding: 26px; border-radius: var(--r-xl); background: var(--grad-soft); border: 1px solid var(--accent-line); }
.an-hero h2 { margin: 0 0 6px; font-size: 24px; }
.an-hero textarea, .an-form textarea, .an-qi textarea { width: 100%; box-sizing: border-box; resize: vertical; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font: inherit; }
.an-hero textarea { margin-top: 10px; font-size: 15px; }
.an-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.an-quick .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.an-pill, .an-opt { border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.an-pill:hover, .an-opt:hover { border-color: var(--accent-line); }
.an-pill.static { cursor: default; }
.an-opt.on { background: var(--accent-soft); border-color: var(--accent); color: #fff; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-width: 1200px; margin: 0 auto; }
section > .an-h, section > .an-grid, section > .an-empty { max-width: 1200px; margin-inline: auto; }
.an-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); cursor: pointer; transition: transform .15s, border-color .15s; }
.an-card:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.an-card-art { height: 110px; display: flex; align-items: flex-end; padding: 10px; color: rgba(255,255,255,.9); font-size: 12px; }
.an-card-b { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.an-card-b small { color: var(--muted); }
.an-card-b .an-row { margin-top: 4px; }
.an-empty { padding: 30px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-lg); }
.an-dl { max-width: 720px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0; font-size: 14px; }
.an-dl dt { color: var(--muted); }
.an-dl dd { margin: 0; text-align: right; }
.an-q { display: flex; flex-direction: column; gap: 16px; }
.an-qi label { display: block; font-weight: 600; margin-bottom: 8px; }
.an-qi .input { max-width: 160px; }
.an-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.an-opts.sm { gap: 4px 12px; }
.an-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.an-more { margin-top: 14px; }
.an-more summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.an-more label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.an-more select, .an-form select, .an-q-sel select, .an-dlg select { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 8px; font: inherit; font-size: 13px; }
.an-title { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.an-title h2 { margin: 0 0 4px; }
.an-title p { margin: 0; }
.an-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.an-tabs button { background: none; border: 0; color: var(--muted); padding: 10px 14px; font: inherit; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.an-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.an-season { margin-bottom: 18px; }
.an-season h3 { margin: 0 0 4px; font-size: 16px; }
.an-eps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.an-eps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.an-eps .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); font-weight: 700; flex: none; }
.an-eps .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.an-eps .t small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-form { display: flex; flex-direction: column; gap: 6px; }
.an-form > label, .an-form .an-grid3 label, .an-form .an-grid2 label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.an-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.an-char { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.an-char header { display: flex; gap: 10px; align-items: center; }
.an-char header small { color: var(--muted); }
.an-char label { font-size: 12px; color: var(--muted); }
.an-char textarea { width: 100%; box-sizing: border-box; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; font: inherit; font-size: 13px; }
.an-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; }
.an-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an-locs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.an-locs li { display: flex; flex-direction: column; }
.an-locs small { color: var(--muted); }
/* editor */
.an-ed { display: flex; flex-direction: column; gap: 12px; max-width: 1500px; margin: 0 auto; }
.an-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-ttl { display: flex; flex-direction: column; min-width: 0; }
.an-ttl small { color: var(--muted); }
.an-q-sel { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.an-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.an-stage { display: flex; flex-direction: column; gap: 8px; }
.an-screen { background: #000; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); display: grid; place-items: center; }
.an-screen canvas { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; }
.an-screen.portrait canvas { width: auto; max-height: 62vh; aspect-ratio: 9 / 16; }
.an-transport { display: flex; align-items: center; gap: 8px; }
.an-time { font-family: var(--mono); font-size: 12px; color: var(--muted); direction: ltr; }
.an-insp { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; max-height: calc(100vh - 220px); overflow: auto; }
.an-insp-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.an-grid3 { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.an-form select, .an-form .input { width: 100%; min-width: 0; box-sizing: border-box; }
.an-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.an-dlg { display: grid; grid-template-columns: 110px 1fr; gap: 6px; margin-bottom: 4px; }
.an-dlg.has-au { grid-template-columns: 110px 1fr auto; }
.an-up { position: relative; cursor: pointer; }
.an-job { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.an-voice { margin-top: 6px; }
.an-voice select { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 8px; font: inherit; font-size: 13px; }
.an-narr { margin-top: 12px; }
/* join files */
.an-join-files { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.an-join-files li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.an-join-files li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-drop { display: block; margin-top: 12px; border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 22px; text-align: center; color: var(--muted); cursor: pointer; }
.an-drop.over { border-color: var(--accent); color: var(--text); }
.an-tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.an-timeline { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 12px; border-top: 1px solid var(--line); direction: rtl; }
.an-scene { flex: none; display: flex; flex-direction: column; gap: 6px; }
.an-scene-h { font-size: 11px; color: var(--muted); white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.an-shots { display: flex; gap: 3px; }
.an-shot { position: relative; width: var(--w); min-width: 56px; height: 64px; border-radius: 6px; border: 2px solid transparent; padding: 0; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; font: inherit; }
.an-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.an-shot .sec { position: absolute; top: 3px; right: 5px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.an-shot .fr { position: absolute; bottom: 3px; right: 5px; left: 5px; font-size: 10px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; direction: ltr; }
.an-shot .dot { position: absolute; top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.an-shot.st-succeeded .dot { background: var(--ok); }
.an-shot.st-queued .dot, .an-shot.st-running .dot { background: var(--warn); animation: an-pulse 1s infinite alternate; }
.an-shot.st-failed .dot { background: var(--danger); }
.an-shot.cur { border-color: #fff; box-shadow: var(--glow); }
.an-shot.sel { outline: 2px dashed var(--gold); outline-offset: 1px; }
.an-shot.drop { border-color: var(--accent); }
@keyframes an-pulse { to { opacity: .35; } }
.an-crit h4 { margin: 12px 0 4px; font-size: 13px; color: var(--muted); }
.an-crit ul { margin: 0; padding-inline-start: 20px; }
.an-crit summary { cursor: pointer; }
.an-score { font-weight: 700; margin-inline-start: 8px; }
.an-score.ok { color: var(--ok); } .an-score.warn { color: var(--warn); } .an-score.bad { color: var(--danger); }
@media (max-width: 1000px) {
  .an-main { display: contents; }
  .an-toolbar { order: 0; } .an-stage { order: 1; } .an-tl-head { order: 2; } .an-timeline { order: 3; } .an-insp { order: 4; } .an-crit { order: 5; }
  .an-insp { max-height: none; }
  .an-cols { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .an-body { padding: 12px; }
  .an-head { padding: 8px 10px; gap: 6px; }
  .an-crumbs, .an-brand b { display: none; }
  .an-hero { padding: 16px; }
  .an-hero h2 { font-size: 20px; }
  .an-eps li { flex-wrap: wrap; }
  .an-grid3 { grid-template-columns: 1fr 1fr; }
  .an-toolbar .an-quote { width: 100%; }
}