/* Hatsu Editor styles. Uses shared tokens.css. The editor is wider than the
   phone-column Studio, so it defines its own body layout (does not load hatsu.css). */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--bg);
	color: var(--tx);
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

.topbar {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 20px; background: var(--bg); border-bottom: 1px solid var(--bd);
}
.tb-left { display: flex; align-items: center; gap: 10px; }
.wordmark {
	font-size: 20px; font-weight: 900; letter-spacing: .5px;
	background: linear-gradient(135deg, var(--h1), var(--h2));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.tb-tag { font-size: 11px; font-weight: 800; color: var(--mu); text-transform: uppercase; letter-spacing: 1px; }
.tb-right { display: flex; align-items: center; gap: 10px; }
.tb-link { font-size: 12px; font-weight: 700; color: var(--mu); text-decoration: none; border: 1px solid var(--bd2); border-radius: 20px; padding: 6px 12px; }
.tb-link:hover { color: var(--tx); }
.icon-btn { cursor: pointer; border: 1px solid var(--bd2); background: var(--bg3); border-radius: 9px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 15px; }

.editor {
	max-width: 1140px; margin: 0 auto; padding: 18px 20px 60px;
	display: grid; grid-template-columns: 360px 1fr; grid-template-areas: "preview project" "timeline timeline"; gap: 18px;
}
@media (max-width: 820px) { .editor { grid-template-columns: 1fr; grid-template-areas: "preview" "project" "timeline"; } }
#preview-pane { grid-area: preview; }
#project-pane { grid-area: project; }
#timeline-pane { grid-area: timeline; }
.pane { background: var(--card); border: 1px solid var(--bd); border-radius: 16px; padding: 16px; }

/* Preview stage + platform mask */
.hz-stage-wrap { display: flex; justify-content: center; }
.hz-stage { position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--bd2); }
.hz-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.hz-dropzone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--mu); font-size: 13px; text-align: center; padding: 20px; }
.hz-dz-emoji { font-size: 30px; }
.hz-dz-sub { font-size: 10.5px; opacity: .7; }

.mask-layer { position: absolute; inset: 0; pointer-events: none; }
.mask-zone { position: absolute; background: rgba(240,89,106,.18); border: 1px solid rgba(240,89,106,.6); }
.mask-zone span { position: absolute; left: 3px; top: 2px; font-size: 7.5px; line-height: 1.1; color: #ffe; text-shadow: 0 1px 2px #000; opacity: .9; }
.mask-margin { position: absolute; border: 1px dashed rgba(60,220,150,.75); border-radius: 3px; }
.mask-tag { position: absolute; left: 6px; bottom: 6px; font-size: 9px; color: #fff; background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 6px; }

.hz-preview-controls { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Buttons / inputs */
.hz-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--tx); background: var(--bg3); border: 1px solid var(--bd2); border-radius: 10px; padding: 9px 12px; }
.hz-btn:hover { border-color: var(--h1); }
.hz-btn-primary { color: #fff; background: linear-gradient(135deg, var(--h1), var(--h2)); border-color: transparent; }
.hz-btn-soon { opacity: .7; }
.hz-input { width: 100%; background: var(--bg3); border: 1px solid var(--bd2); border-radius: 10px; color: var(--tx); font-size: 13px; padding: 9px 11px; font-family: inherit; }

.hz-plats { display: flex; gap: 6px; flex-wrap: wrap; }
.hz-plat { flex: 1; min-width: 64px; font-size: 12.5px; font-weight: 700; color: var(--mu); background: var(--bg3); border: 1px solid var(--bd2); border-radius: 10px; padding: 9px 6px; cursor: pointer; }
.hz-plat.active { color: #fff; background: linear-gradient(135deg, var(--h1), var(--h2)); border-color: transparent; }

/* Project screen blocks */
.ps-block { margin-bottom: 16px; }
.ps-h { font-size: 11px; font-weight: 800; color: var(--mu); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 7px; }
.ps-meta { font-size: 10.5px; color: var(--mu); margin-top: 5px; word-break: break-all; }
.ps-row { display: flex; gap: 7px; margin-top: 7px; }
.ps-wrap { flex-wrap: wrap; }
.ps-badge { font-size: 9px; font-weight: 800; color: #eab308; border: 1px solid rgba(234,179,8,.4); background: rgba(234,179,8,.12); border-radius: 20px; padding: 1px 7px; }
.ps-badge-soon { color: var(--mu); border-color: var(--bd2); background: var(--bg3); }
.ps-note { font-size: 10.5px; color: var(--mu); margin-top: 7px; }
.ps-momo-out { margin-top: 8px; }
.momo-card { font-size: 11.5px; color: var(--tx); background: var(--bg3); border: 1px solid var(--bd2); border-radius: 10px; padding: 10px; line-height: 1.5; }
.momo-line { color: var(--mu); margin-top: 4px; }

/* Timeline */
.tl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tl-title { font-size: 12px; font-weight: 800; color: var(--tx); }
.tl-dur { font-size: 11px; color: var(--mu); }
.tl-ruler { position: relative; height: 22px; border-bottom: 1px solid var(--bd2); margin-bottom: 6px; }
.tl-tick { position: absolute; top: 2px; transform: translateX(-50%); font-size: 9px; color: var(--mu); }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--h2); }
.tl-tracks { display: flex; flex-direction: column; gap: 6px; }
.tl-row { display: flex; align-items: stretch; gap: 8px; }
.tl-label { width: 130px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--tx); display: flex; align-items: center; }
.tl-lane { flex: 1; min-height: 40px; background: var(--bg3); border: 1px dashed var(--bd2); border-radius: 8px; display: flex; align-items: center; padding: 0 10px; }
.tl-empty { font-size: 11px; color: var(--mu); }

/* Toast */
#hz-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: #111827; color: #fff; border: 1px solid var(--bd2); border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s; z-index: 50; max-width: 90%; }
#hz-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Auto-production controls ─────────────────────────────────────────────── */
.ps-status { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; color:var(--mu); }
.ps-dot { width:8px; height:8px; border-radius:50%; background:var(--bd2); flex-shrink:0; }
.ps-dot.busy { background:var(--h2); animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.ps-prog { height:5px; background:var(--bg3); border-radius:4px; margin-top:7px; overflow:hidden; }
.ps-prog-fill { height:100%; width:0; background:linear-gradient(90deg,var(--h1),var(--h2)); transition:width .2s; }
.ps-badge-ok { color:#22c55e; border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.12); }
.ps-transcript { max-height:110px; overflow:auto; font-size:12.5px; line-height:1.75; color:var(--tx); background:var(--bg3); border:1px solid var(--bd); border-radius:10px; padding:9px; margin:6px 0; }
.ps-w { cursor:pointer; border-bottom:1px dashed transparent; }
.ps-w:hover { border-bottom-color:var(--h2); }
.ps-w-low { color:#f59e0b; border-bottom:1px dashed #f59e0b; }

/* ── Preview overlay (burned content — captions + motion graphics) ─────────── */
.hz-overlay { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cap-block, .mg-block { pointer-events:none; }
.cap-line { white-space:nowrap; }
.mg-block { font-family:Arial, sans-serif; }
.mg-headline { background:rgba(10,12,20,.82); color:#fff; font-weight:900; font-size:13px; padding:6px 10px; border-radius:6px; max-width:180px; }
.mg-chip { color:#fff; font-weight:800; font-size:12px; padding:4px 10px; border-radius:20px; }
.mg-number { font-weight:900; font-size:22px; text-shadow:0 2px 6px rgba(0,0,0,.7); }
.mg-card { background:rgba(10,12,20,.82); color:#fff; font-weight:700; font-size:12px; padding:7px 10px; border-radius:8px; max-width:180px; }
.mg-sub { font-weight:500; color:#9aa; font-size:10px; margin-top:2px; }
.mg-cta { color:#fff; font-weight:800; font-size:12px; padding:6px 12px; border-radius:8px; }
.mg-warn { background:rgba(10,12,20,.85); font-weight:800; font-size:12px; padding:6px 10px; border-radius:6px; }
.mg-compare { display:flex; gap:6px; align-items:center; background:rgba(10,12,20,.82); color:#fff; padding:6px 10px; border-radius:8px; font-weight:800; font-size:12px; }

/* ── Timeline items ───────────────────────────────────────────────────────── */
.tl-lane { position:relative; }
.tl-item { position:absolute; top:6px; height:26px; line-height:26px; font-size:9px; color:#fff; border-radius:4px; padding:0 5px; overflow:hidden; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.tl-cap { background:#3b82f6; }
.tl-mo { background:#8b5cf6; }
.tl-so { background:#f59e0b; }

/* Transcription status / warnings */
.ps-warn { font-size:11.5px; line-height:1.5; color:#fca5a5; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35); border-radius:9px; padding:8px 10px; margin-top:8px; }
.ps-warn-demo { color:#eab308; background:rgba(234,179,8,.1); border-color:rgba(234,179,8,.4); }
.ps-warn code { font-size:11px; background:rgba(255,255,255,.08); padding:1px 4px; border-radius:4px; }