*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07070a;
  --panel:#111217;
  --panel2:#171921;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --text:#f4f5f7;
  --muted:#9698a4;
  --muted2:#70737f;
  --lime:#bdfd1e;
  --lime2:#96d90b;
  --accent:#6b84ff;
  --danger:#ff6767;
  --ok:#4ce080;
}
html,body{height:100%}
body{
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  background:
    radial-gradient(circle at 18% 0%, rgba(91,132,255,.14), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(189,253,30,.10), transparent 28%),
    var(--bg);
  color:var(--text);
  overflow:hidden;
}
button,input,textarea{font:inherit}
button{cursor:pointer}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:20px}
.app-shell{height:100vh;display:flex;flex-direction:column}
.topbar{
  height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  border-bottom:1px solid var(--line);background:rgba(7,7,10,.84);backdrop-filter:blur(18px);
}
.brand-wrap{display:flex;align-items:center;gap:12px}
.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--lime));color:#050505;font-weight:800}
.brand-copy strong{display:block;font-size:14px}
.brand-copy span{display:block;font-size:11px;color:var(--muted)}
.tool-tabs{display:flex;gap:6px;background:rgba(255,255,255,.035);padding:5px;border:1px solid var(--line);border-radius:16px}
.tool-tab{border:0;background:transparent;color:var(--muted);padding:10px 16px;border-radius:12px;font-size:13px;font-weight:800}
.tool-tab.active{background:var(--text);color:#060606}
.library-btn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);padding:10px 14px;border-radius:12px;font-weight:700}
.workspace{flex:1;display:grid;grid-template-columns:minmax(0,1.5fr) 420px;gap:18px;padding:18px;min-height:0}
.stage-area,.control-area{min-height:0}
.stage-area{display:flex;flex-direction:column;gap:14px;min-width:0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.kicker,.mini-kicker{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--lime)}
.section-head h1{font-size:30px;letter-spacing:-.03em}
.status-badge{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px;font-weight:800;color:var(--muted)}
.stage-card{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;min-height:340px;max-height:54vh}
.stage-viewer{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:340px}
.stage-viewer img,.stage-viewer video{width:100%;height:100%;object-fit:cover;display:block}
.stage-viewer pre{width:100%;height:100%;padding:24px;overflow:auto;white-space:pre-wrap;font-family:inherit;line-height:1.9}
.stage-placeholder{text-align:center;max-width:500px;padding:40px;color:var(--muted)}
.placeholder-icon{width:62px;height:62px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:28px;color:var(--lime)}
.stage-placeholder h3{font-size:24px;color:var(--text);margin-bottom:10px}
.stage-placeholder p{line-height:1.9}
.progress-layer{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,10,.18),rgba(7,7,10,.62));display:grid;place-items:center;z-index:5}
.progress-box{width:min(420px,78%);padding:22px;border-radius:24px;background:rgba(10,11,15,.9);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.progress-label{font-size:18px;font-weight:800;margin-bottom:14px;text-align:center}
.progress-track{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.progress-bar{width:0%;height:100%;background:linear-gradient(90deg,var(--lime2),var(--lime));transition:width .35s ease}
.progress-note{margin-top:12px;text-align:center;color:var(--muted);font-size:13px}
.details-panel{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:28px;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:0}
.detail-block{padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.detail-block span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.detail-block strong{font-size:14px;line-height:1.6}
.detail-output{display:flex;flex-direction:column;flex:1;min-height:0}
.output-scroll{flex:1;min-height:140px;max-height:100%;overflow:auto;line-height:1.8;color:#dadde6;white-space:pre-wrap;font-size:13px}
.results-grid-wrap{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:26px;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:180px;overflow:hidden}
.results-grid-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;overflow:auto;padding-left:2px}
.result-card{border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);border-radius:18px;padding:8px;cursor:pointer;transition:.18s}
.result-card:hover{transform:translateY(-1px);border-color:rgba(189,253,30,.34)}
.result-card img,.result-card video,.result-thumb-text{width:100%;height:120px;object-fit:cover;border-radius:12px;background:#0b0b0f;display:block}
.result-thumb-text{display:grid;place-items:center;padding:12px;text-align:center;color:var(--muted);line-height:1.8;font-size:12px}
.result-meta{padding:8px 4px 2px}
.result-type{font-size:11px;color:var(--lime);font-weight:800;text-transform:uppercase}
.result-title{font-size:12px;color:var(--text);line-height:1.6;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.control-area{min-width:0}
.control-card{height:100%;display:flex;flex-direction:column;gap:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:28px;padding:18px;overflow:auto}
.control-card-head h2{font-size:26px;letter-spacing:-.03em;margin-top:4px}
.field-group{display:flex;flex-direction:column;gap:8px}
.field-group label{font-size:13px;color:var(--muted);font-weight:700}
#promptInput{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--text);padding:14px 15px;border-radius:18px;resize:vertical;min-height:170px;outline:none;line-height:1.9}
#promptInput:focus{border-color:rgba(189,253,30,.4)}
.attachment-box{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:18px}
.attachment-box img{width:74px;height:54px;object-fit:cover;border-radius:12px}
.attachment-copy{flex:1;min-width:0}.attachment-copy strong{display:block}.attachment-copy span{display:block;font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.action-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ghost-btn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);padding:10px 12px;border-radius:12px;font-weight:700}
.ghost-btn.danger{color:var(--danger)}
.helper-text{font-size:12px;color:var(--muted);line-height:1.6}
.config-block{display:flex;flex-direction:column;gap:14px}
.config-group{display:flex;flex-direction:column;gap:8px}
.cfg-title{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.chips-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);padding:8px 11px;border-radius:999px;font-size:12px;font-weight:800}
.chip.active{background:var(--lime);border-color:var(--lime);color:#050505}
.generate-bar{margin-top:auto;display:flex;flex-direction:column;gap:10px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(17,18,23,.0),rgba(17,18,23,1) 25%);padding-top:14px}
.generate-btn{border:0;background:linear-gradient(180deg,var(--lime),var(--lime2));color:#060606;padding:16px;border-radius:18px;font-size:16px;font-weight:900}
.generate-note{font-size:12px;color:var(--muted);line-height:1.8}
.library-panel{position:fixed;left:0;top:0;bottom:0;width:min(420px,92vw);background:#101115;border-right:1px solid var(--line);padding:18px;z-index:80;overflow:auto}
.library-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.library-head button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);padding:8px 12px;border-radius:10px}
.library-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lib-item{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:16px;padding:8px}
.lib-item img,.lib-item video{width:100%;height:110px;object-fit:cover;border-radius:10px;background:#060606}.lib-item span{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70}
@media(max-width:1180px){.workspace{grid-template-columns:1fr}.stage-card{grid-template-columns:1fr}.details-panel{max-height:240px}.control-card{max-height:none}}
@media(max-width:760px){body{overflow:auto}.topbar{height:auto;gap:12px;flex-wrap:wrap;padding:12px}.tool-tabs{order:3;width:100%;overflow:auto}.workspace{padding:12px}.stage-card{max-height:none}.section-head{flex-direction:column;align-items:flex-start}.results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ═════════ V22 — Stage ratio loading placeholder ═════════ */
.stage-viewer {
  aspect-ratio: 16 / 9;
  min-height: unset;
  transition: aspect-ratio .25s ease, border-radius .25s ease;
}

.stage-viewer.ratio-16-9 { aspect-ratio: 16 / 9; }
.stage-viewer.ratio-9-16 {
  aspect-ratio: 9 / 16;
  max-width: 420px;
  margin-inline: auto;
}
.stage-viewer.ratio-1-1 {
  aspect-ratio: 1 / 1;
  max-width: 620px;
  margin-inline: auto;
}

.loading-stage {
  position: absolute;
  inset: 0;
  padding: clamp(10px, 2vw, 18px);
  z-index: 8;
  background: rgba(6,7,10,.72);
  backdrop-filter: blur(8px);
}

.loading-stage-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(22px, 4vw, 34px);
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.08), transparent 25%),
    linear-gradient(135deg, #24262b 0%, #2e3035 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.loading-dots-pattern {
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image: radial-gradient(rgba(255,255,255,.32) 1.15px, transparent 1.15px);
  background-size: 27px 27px;
  mask-image: radial-gradient(circle at 30% 28%, black 0%, black 46%, transparent 82%);
  -webkit-mask-image: radial-gradient(circle at 30% 28%, black 0%, black 46%, transparent 82%);
  animation: loadingPatternDrift 12s linear infinite;
}

.loading-meta {
  position: absolute;
  inset-inline: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.loading-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: #e1e5ed;
  font-size: 12px;
  font-weight: 800;
}

.loading-title {
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
}

.loading-sub {
  font-size: 13px;
  color: rgba(255,255,255,.66);
  line-height: 1.7;
}

.loading-progress-wrap { margin-top: 3px; }

.loading-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}

.loading-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8bff17 0%, #c5ff54 100%);
  transition: width .42s cubic-bezier(.2,.9,.2,1);
  position: relative;
}

.loading-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: translateX(-100%);
  animation: progressShine 1.45s ease-in-out infinite;
}

@keyframes loadingPatternDrift {
  from { background-position: 0 0; }
  to { background-position: 54px 54px; }
}

@keyframes progressShine {
  0% { transform: translateX(-100%); }
  65%,100% { transform: translateX(120%); }
}

/* ═════════ V22 — Soft card entrance animations ═════════ */
.result-card {
  opacity: 0;
  transform: translateY(12px) scale(.985);
  animation: cardSoftIn .42s cubic-bezier(.2,.8,.2,1) forwards;
  will-change: transform, opacity;
}

.result-card.entering {
  animation: cardSoftIn .48s cubic-bezier(.18,.88,.25,1) forwards;
}

.result-card:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 18px 45px rgba(0,0,0,.20), 0 0 0 1px rgba(189,253,30,.08);
}

.result-card img,
.result-card video,
.result-thumb-text {
  transition: transform .35s ease, filter .35s ease;
}

.result-card:hover img,
.result-card:hover video,
.result-card:hover .result-thumb-text {
  transform: scale(1.025);
  filter: saturate(1.08) contrast(1.03);
}

@keyframes cardSoftIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.982);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-card,
  .result-card.entering,
  .loading-dots-pattern,
  .loading-progress-bar::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .loading-progress-bar { transition: none !important; }
}


/* V23 — timeout is not treated as failure */
.manual-check-box {
  position: absolute;
  z-index: 7;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(12,13,18,.88);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.manual-check-box strong {
  display: block;
  font-size: 14px;
  color: var(--text);
}

.manual-check-box span {
  display: block;
  margin-top: 4px;
  direction: ltr;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}

.manual-check-box button {
  border: 0;
  background: var(--lime);
  color: #060606;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  white-space: nowrap;
}

.manual-check-box button:disabled {
  opacity: .55;
  cursor: wait;
}


/* V24 — Seedance model selector */
.config-group[data-control="model"] .chip.active {
  background: linear-gradient(180deg, #e9f7ff, #cdeaff);
  border-color: rgba(180,230,255,.9);
  color: #071018;
}

/* ══ SEEDANCE STUDIO OVERRIDE ══ */
.generate-btn {
  background: #9cff00 !important;
  color: #060606 !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  border: none !important;
}
.generate-btn:hover { opacity: .88; }

.chip {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
}
.chip.active {
  background: rgba(156,255,0,.08);
  border-color: rgba(156,255,0,.22);
  color: #9cff00;
}
.chip:hover { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }

.control-card {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 24px !important;
}

.result-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}
.result-card:hover {
  border-color: rgba(156,255,0,.22);
  box-shadow: none;
  transform: translateY(-2px);
}

.details-panel, .results-grid-wrap {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 22px !important;
}

.stage-viewer {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 22px !important;
}

#promptInput {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
}
#promptInput:focus {
  border-color: rgba(156,255,0,.28) !important;
}

.ghost-btn {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}
.ghost-btn:hover { border-color: rgba(255,255,255,.14) !important; }

.attachment-box {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
}