:root {
  --bg0: #070d12;
  --ink: #f2ebe0;
  --muted: #9eb0bd;
  --line: rgba(168, 196, 210, 0.18);
  --warm: #e0b57a;
  --rain: #7fa9bd;
  --ok: #8fcd9a;
  --bad: #e08a8a;
  --panel: rgba(14, 22, 30, 0.78);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background: var(--bg0);
  font-family: "IBM Plex Sans Thai", "Noto Sans Thai", sans-serif;
}

body { min-height: 100dvh; position: relative; overflow-x: hidden; }

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(224, 181, 122, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 20%, rgba(70, 110, 130, 0.22), transparent 50%),
    linear-gradient(180deg, #0c1520 0%, var(--bg0) 55%, #060a0e 100%);
}

.rain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 10px,
    rgba(180, 210, 230, 0.08) 11px,
    transparent 14px
  );
  background-size: 100% 48px;
  animation: rain-fall 1.1s linear infinite;
}

@keyframes rain-fall {
  from { background-position: 0 0; }
  to { background-position: 0 48px; }
}

.shell {
  position: relative;
  z-index: 2;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: calc(28px + var(--safe-top)) 20px calc(36px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brand {
  margin: 0;
  font-family: "Noto Serif Thai", serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--warm);
}

.hero h1 {
  margin: 8px 0 0;
  font-family: "Noto Serif Thai", serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 500;
}

.lede { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}

label {
  display: block;
  margin: 14px 0 7px;
  color: var(--warm);
  font-size: 0.92rem;
  font-weight: 600;
}

label:first-child { margin-top: 0; }

input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(8, 14, 20, 0.9);
  color: var(--ink);
  border-radius: 12px;
  padding: 13px 14px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

textarea { min-height: 280px; resize: vertical; }

input:focus, textarea:focus {
  outline: 2px solid rgba(224, 181, 122, 0.45);
  outline-offset: 1px;
}

.script-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.script-row textarea { flex: 1; }

.file-btn {
  position: relative;
  flex: 0 0 7.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(224, 181, 122, 0.45);
  background: rgba(224, 181, 122, 0.12);
  color: var(--warm);
  font-weight: 700;
  cursor: pointer;
  margin: 0;
}

.file-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.clip-count { margin: 14px 0 0; font-weight: 700; }

.clip-titles {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
}

.clip-titles li { padding: 2px 0; }

.btn {
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 14px;
  padding: 16px;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  color: #1b1208;
  background: linear-gradient(180deg, #ebc48a, #c99555);
}

.btn:disabled { opacity: 0.6; cursor: wait; }

.live-title { margin: 0 0 10px; font-weight: 600; }

.progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.track {
  flex: 1;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c99555, #ebc48a);
  transition: width 0.35s ease;
}

.progress-side {
  margin: 0;
  min-width: 9.5rem;
  font-weight: 700;
  color: var(--warm);
  white-space: nowrap;
}

.status {
  display: inline-block;
  margin: 12px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(127, 169, 189, 0.12);
  color: var(--rain);
}

.status.done { background: rgba(143, 205, 154, 0.12); color: var(--ok); }
.status.error { background: rgba(224, 138, 138, 0.12); color: var(--bad); }

.step-line {
  margin: 10px 0 0;
  font-weight: 600;
  line-height: 1.45;
}

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.steps li.current {
  color: #1b1208;
  background: var(--warm);
  border-color: transparent;
  font-weight: 700;
}

.steps li.next {
  color: var(--warm);
  border-color: rgba(224, 181, 122, 0.7);
}

.steps li.done { color: var(--ink); }

.dl {
  display: block;
  text-align: center;
  margin-top: 12px;
  text-decoration: none;
  color: var(--ok);
  background: rgba(36, 58, 40, 0.7);
  border: 1px solid rgba(143, 205, 154, 0.25);
  padding: 13px;
  border-radius: 12px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .script-row { flex-direction: column; }
  .file-btn { min-height: 48px; flex-basis: auto; }
  .progress-row { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .rain, .fill { animation: none; transition: none; }
}

[hidden] { display: none !important; }
#preview { width: 100%; max-height: 520px; margin-top: 20px; background: #000; border-radius: 12px; }
.secondary, .history-item { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 10px 14px; font: inherit; cursor: pointer; }
.secondary { margin: 12px 0; }
.history-item { display: block; width: 100%; text-align: left; margin: 8px 0; }
button:focus-visible,a:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
h2 { font-size: 1.1rem; }

.gpu-heading {display:flex;align-items:center;justify-content:space-between;gap:12px}
.gpu-heading h2 {margin:0}
.gpu-badge {font-size:.85rem;color:var(--rain);border:1px solid var(--line);padding:5px 10px;border-radius:99px;white-space:nowrap}
.gpu-badge[data-phase=ready] {color:var(--ok);border-color:rgba(143,205,154,.4)}
.gpu-badge[data-phase=return_error],.gpu-badge[data-phase=error] {color:var(--bad)}
.gpu-rate {color:var(--warm);font-size:.95rem;margin:12px 0}
.gpu-actions {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gpu-actions button {margin:0;min-height:54px;font-size:1rem;padding:12px}
.gpu-return {color:var(--bad);border-color:rgba(224,138,138,.4)}
.gpu-help {font-size:.85rem;color:var(--muted);line-height:1.7;margin:14px 0 0}
button:disabled {opacity:.55;cursor:default}
.status.cancelled {color:var(--muted)}
@media(max-width:420px){.gpu-actions{grid-template-columns:1fr}.gpu-heading{align-items:flex-start}}

.readiness-checks {list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;margin:16px 0 0}
.readiness-checks li {padding:10px;border:1px solid var(--line);border-radius:10px;color:var(--muted);line-height:1.5;font-size:.85rem}
.readiness-checks strong {display:block;color:var(--ink)}
.readiness-checks .pass {border-color:rgba(143,205,154,.4);color:var(--ok)}
.readiness-checks .running {border-color:rgba(224,181,122,.5);color:var(--warm)}
.readiness-checks .error {border-color:rgba(224,138,138,.5);color:var(--bad)}
@media(max-width:640px){.readiness-checks{grid-template-columns:1fr}}

.image-composer{margin:18px 0;padding:16px;border:1px dashed #66787d;border-radius:16px;background:#0a1218}.image-composer p{margin:0 0 12px}.image-pick{display:inline-flex;align-items:center;cursor:pointer}.image-pick input{width:auto;max-width:230px;margin:0 0 0 12px}#image-attached{margin-top:14px}#image-attached[hidden]{display:none}#image-thumb{display:block;max-width:100%;max-height:300px;border-radius:12px;object-fit:contain;margin-bottom:12px}#image-audio{width:auto;margin-right:8px}#image-attached label{margin-top:12px}

.image-pick{display:flex;flex-wrap:wrap;gap:8px}.image-pick input{max-width:100%;min-width:0;margin:0}

.duration-fields, .page-controls {display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.duration-fields label {flex:1;min-width:8rem}
.clip-library-item {padding:1rem 0;border-bottom:1px solid #31404b}
#library-player {max-width:100%;max-height:65vh}

.production-options{margin:1rem 0;padding:1rem;border:1px solid #293943;border-radius:16px}.production-options label{display:block;margin:.75rem 0}.production-options textarea{width:100%;min-height:90px;box-sizing:border-box}

.production-options input[type="checkbox"]{width:auto;padding:0;margin:0 .5rem 0 0;vertical-align:middle;accent-color:#d9ae70}.production-options input[type="checkbox"]:focus-visible{outline-offset:3px}