/* ------------------------- RoMotion — Create (generator + viewer) -------------------------------------------------- */

body.is-app { height: calc(var(--vh) * 100); display: flex; flex-direction: column; overflow: hidden; background: var(--c-white); }
body.is-app .nav { position: relative; padding: .45em calc(var(--gap) * .75) .45em; flex: none; border-bottom: 1px solid var(--border); }
body.is-app .menu-btn { top: .7em; right: .9em; }

.app {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(17em, 21vw, 21em) minmax(0, 1fr) clamp(16em, 19vw, 19em);
}

/* ------------------------- Panels -------------------------------------------------- */

.panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.25em 1.25em 2em; scrollbar-width: thin; }
.panel-left { border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2em; }
.panel-right { border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 1.75em; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9em; min-height: 1.5em; }
.panel-head h5 { margin: 0; }
.panel-head .count { font-family: var(--mono); font-size: .75em; color: var(--c-gray); }
.link-btn { font-size: .82em; color: var(--c-gray); transition: color .2s; display: inline-flex; gap: .5em; align-items: center; }
.link-btn:hover { color: var(--c-dark); }
.muted-note { font-size: .8em; line-height: 1.5; color: var(--c-gray); }

.gen textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9em 1em;
  font: inherit;
  font-size: .98em;
  line-height: 1.45;
  resize: vertical;
  min-height: 7.5em;
  max-height: 18em;
  outline: 0;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  color: var(--c-dark);
  background: var(--c-white);
}
.gen textarea:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(69, 92, 233, .12); }
.gen textarea::placeholder { color: rgba(28, 29, 32, .38); }
.field-row { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .85em 0; border-bottom: 1px solid var(--border); }
.field-row.is-stacked { flex-direction: column; align-items: flex-start; gap: .7em; }
.field-label { font-size: .85em; }
.field-row .range-wrap { flex: 1; max-width: 11em; gap: .8em; }
.field-row .range-wrap output { min-width: 3em; text-align: right; font-size: .8em; }
.chips.small .chip-toggle span { height: 2.25em; padding: 0 .9em; font-size: .82em; }
.gen-go { width: 100%; justify-content: center; margin-top: 1.25em; }
.gen-go[disabled] { opacity: .5; pointer-events: none; }
.gen-status { margin-top: 1em; }
.gen-progress { height: 3px; background: var(--c-light); border-radius: 3px; overflow: hidden; }
.gen-progress i { display: block; height: 100%; width: 0; background: var(--c-blue); transition: width .5s var(--ease); }
.gen-status p { font-size: .82em; margin-top: .6em; color: #5b5d63; line-height: 1.45; }
.gen-status.is-error .gen-progress i { background: var(--c-orange); }
.status-dot { width: .55em; height: .55em; border-radius: 50%; background: var(--c-orange); }
.status-dot.is-on { background: var(--c-green); }

.history ul { list-style: none; margin: 0; padding: 0; }
.history li button {
  width: 100%;
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: .8em;
  align-items: center;
  text-align: left;
  padding: .6em .5em;
  margin: 0 -.5em;
  width: calc(100% + 1em);
  border-radius: 8px;
  transition: background .2s;
}
.history li button:hover { background: var(--c-light); }
.history li.is-current button { background: var(--c-light); }
.history .h-thumb { width: 2.6em; height: 2.6em; border-radius: 6px; background: var(--c-light); overflow: hidden; position: relative; }
.history .h-thumb canvas { width: 100%; height: 100%; display: block; }
.history .h-title { display: block; font-size: .85em; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history .h-meta { display: block; font-size: .72em; color: var(--c-gray); font-family: var(--mono); }

.facts { margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 1em; padding: .5em 0; border-bottom: 1px solid var(--border); font-size: .85em; }
.facts dt { color: var(--c-gray); }
.facts dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11em; font-family: var(--mono); font-size: .9em; }

.clips { list-style: none; margin: 0; padding: 0; max-height: 14em; overflow-y: auto; }
.clips button { width: 100%; display: flex; justify-content: space-between; gap: 1em; padding: .55em .7em; border-radius: 8px; font-size: .85em; text-align: left; transition: background .2s; }
.clips button:hover { background: var(--c-light); }
.clips button.is-active { background: var(--c-dark); color: #fff; }
.clips button span:last-child { font-family: var(--mono); font-size: .85em; opacity: .6; flex: none; }

.toggles { list-style: none; margin: 0; padding: 0; }
.toggles li { display: flex; justify-content: space-between; align-items: center; padding: .48em 0; }
.toggles .toggle { font-size: .88em; gap: .75em; }
.toggles li.sub { flex-direction: column; align-items: stretch; gap: .4em; padding: .2em 0 .7em 3.15em; }
.mini-range { display: grid; grid-template-columns: 3.5em 1fr 2.2em; align-items: center; gap: .6em; font-size: .78em; color: #5b5d63; }
.mini-range output { font-family: var(--mono); text-align: right; }
.kbd-s { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; height: 1.75em; padding: 0 .45em; border-radius: 5px; border: 1px solid var(--border); font-family: var(--mono); font-size: .7em; color: #5b5d63; background: var(--c-white); }

.swatches { display: flex; gap: .55em; }
.swatches button { width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(28, 29, 32, .15); position: relative; transition: transform .3s var(--ease); }
.swatches button:hover { transform: scale(1.1); }
.swatches button.is-active::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--c-dark); }

.export { display: flex; flex-wrap: wrap; gap: .45em; }
.export .btn-pill[disabled] { opacity: .45; pointer-events: none; }
.export .badge { background: var(--c-light); height: 1.6em; margin-left: .3em; }
.shortcuts-btn { margin-top: auto; align-self: flex-start; }

/* ------------------------- Viewport -------------------------------------------------- */

.viewport { position: relative; min-height: 0; background: var(--c-light); overflow: hidden; }
.viewer-host { position: absolute; inset: 0; }
.viewer-canvas { display: block; width: 100% !important; height: 100% !important; outline: 0; touch-action: none; }
.viewport.is-empty .viewer-canvas { opacity: 0; }

.vp-top { position: absolute; left: 1em; right: 1em; top: 1em; z-index: 3; display: flex; justify-content: space-between; gap: .75em; pointer-events: none; }
.vp-top > * { pointer-events: auto; }
.vp-views, .vp-quick {
  display: inline-flex;
  gap: .15em;
  padding: .25em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(28, 29, 32, .06);
}
.vp-views button, .vp-quick button { height: 2.2em; min-width: 2.2em; padding: 0 .85em; border-radius: 999px; font-size: .8em; display: inline-flex; align-items: center; justify-content: center; transition: background .25s var(--ease), color .25s var(--ease); }
.vp-views button:hover, .vp-quick button:hover { background: rgba(28, 29, 32, .07); }
.vp-views button.is-active, .vp-quick button.is-on { background: var(--c-dark); color: #fff; }
.vp-quick button svg { width: 1.05em; height: 1.05em; }
.vp-quick [data-action="fullscreen"] { padding: 0; }
.viewport.is-empty .vp-top { opacity: .35; pointer-events: none; }

.vp-legend { position: absolute; left: 1.1em; top: 4.2em; z-index: 3; display: flex; flex-direction: column; gap: .3em; font-size: .75em; }
.vp-legend span { display: inline-flex; align-items: center; gap: .5em; }
.vp-legend i { width: 1.4em; height: 2px; border-radius: 2px; background: var(--c); }

.vp-empty { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; padding: 5em 1.5em 7.5em; }
.viewport.is-empty .vp-empty { display: flex; }
.empty-card { position: relative; width: min(34em, 100%); border-radius: 18px; border: 1.5px dashed rgba(28, 29, 32, .2); overflow: hidden; transition: border-color .3s var(--ease), background .3s; }
.empty-card:hover { border-color: rgba(28, 29, 32, .4); }
.empty-curves { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.empty-copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1em; padding: 3.2em 2em 2.6em; }
.empty-copy h3 { font-size: 1.9em; }
.empty-copy p { font-size: .98em; color: #5b5d63; max-width: 24em; }
.empty-copy .btn-pill { cursor: pointer; margin-top: .4em; }
.empty-mark { width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--c-dark); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: .4em; }

.vp-loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; background: rgba(233, 234, 235, .7); backdrop-filter: blur(6px); font-size: .9em; }
.vp-loading .loader-frame { font-size: 1.6em; color: var(--c-blue); }
.vp-drop { position: absolute; inset: .75em; z-index: 6; border-radius: 14px; border: 2px dashed var(--c-blue); background: rgba(69, 92, 233, .1); display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.vp-drop h3 { color: var(--c-blue); }
.vp-drop p { color: var(--c-blue); font-family: var(--mono); font-size: .85em; }

.toast {
  position: absolute;
  left: 50%; bottom: 6.5em;
  z-index: 7;
  max-width: min(32em, calc(100% - 2em));
  padding: .8em 1.2em;
  border-radius: 12px;
  background: var(--c-dark);
  color: #fff;
  font-size: .88em;
  line-height: 1.45;
  transform: translate(-50%, 1em);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .5s var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------- Transport -------------------------------------------------- */

.transport {
  position: absolute;
  left: 1em; right: 1em; bottom: 1em;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: .5em 1em .5em .5em;
  border-radius: 999px;
  background: var(--c-dark);
  color: #fff;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5);
  transition: opacity .3s var(--ease), transform .5s var(--ease-out);
}
.viewport.is-empty .transport { opacity: .4; pointer-events: none; transform: translateY(.5em); }
.tp-buttons { display: flex; align-items: center; gap: .1em; flex: none; }
.tp-buttons button, .tp-right button { width: 2.4em; height: 2.4em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .8); transition: background .2s, color .2s; }
.tp-buttons button:hover, .tp-right button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tp-buttons svg, .tp-right svg { width: 1em; height: 1em; }
.tp-buttons .tp-play { width: 3em; height: 3em; background: var(--c-blue); color: #fff; margin: 0 .25em; }
.tp-buttons .tp-play:hover { background: var(--c-blue-dark); }
.tp-play .i-pause { display: none; }
.transport.is-playing .tp-play .i-pause { display: block; }
.transport.is-playing .tp-play .i-play { display: none; }

.timeline { position: relative; flex: 1; height: 2.6em; cursor: pointer; touch-action: none; outline: 0; }
.timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.timeline:focus-visible { box-shadow: 0 0 0 2px var(--c-blue); border-radius: 6px; }
.tl-played { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(255, 255, 255, .55); width: 0; pointer-events: none; }
.tl-ticks { position: absolute; inset: 0; pointer-events: none; }
.tl-ticks i { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; transform: rotate(45deg); background: #fff; opacity: .5; border-radius: 1px; }
.tl-ticks i.is-past { background: var(--c-blue); opacity: 1; }
.tl-ticks.is-dense i { width: 1px; height: 9px; margin: -4.5px 0 0 0; transform: none; border-radius: 0; opacity: .35; }
.tl-ticks.is-dense i.is-past { background: #fff; opacity: .9; }
.tl-head { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.tl-head::before { content: ''; position: absolute; left: -1px; top: 12%; bottom: 12%; width: 2px; background: #fff; border-radius: 2px; }
.tl-head span { position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(69, 92, 233, .45); transition: transform .2s var(--ease); }
.timeline:hover .tl-head span, .timeline.is-dragging .tl-head span { transform: scale(1.25); }
.tl-hover { position: absolute; bottom: calc(100% + .5em); transform: translateX(-50%); padding: .3em .55em; border-radius: 5px; background: #fff; color: var(--c-dark); font-size: .7em; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.timeline:hover .tl-hover { opacity: 1; }

.tp-readout { flex: none; display: flex; align-items: baseline; gap: .35em; font-size: .75em; color: rgba(255, 255, 255, .55); min-width: 12em; white-space: nowrap; }
.tp-readout [data-frame] { color: #fff; }
.tp-readout .time { margin-left: .8em; }
.tp-right { flex: none; display: flex; align-items: center; gap: .3em; }
.tp-speed select { appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, .1); color: #fff; border: 0; border-radius: 999px; height: 2.4em; padding: 0 .9em; font: inherit; font-size: .8em; cursor: pointer; font-family: var(--mono); }
.tp-speed select:focus-visible { outline: 2px solid var(--c-blue); }
.tp-speed option { color: var(--c-dark); }
.tp-right button.is-on { color: #fff; background: rgba(69, 92, 233, .55); }

/* ------------------------- Modal -------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; background: rgba(20, 21, 23, .45); padding: 1.5em; }
.modal-card { width: min(30em, 100%); background: #fff; border-radius: 16px; padding: 1.5em 1.75em 1.75em; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
.shortcuts { margin: 0; }
.shortcuts div { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .55em 0; border-bottom: 1px solid var(--border); font-size: .9em; }
.shortcuts dt { display: flex; gap: .3em; align-items: center; }
.shortcuts dd { margin: 0; color: #5b5d63; }

/* ------------------------- Tabs (mobile) -------------------------------------------------- */

.app-tabs { display: none; }

@media (max-width: 1024px) {
  body.is-app { height: auto; overflow: visible; display: block; }
  .app { display: flex; flex-direction: column; }
  .viewport { order: 1; height: calc(var(--vh) * 68); min-height: 26em; }
  .app-tabs { order: 2; display: flex; gap: .4em; padding: .9em var(--gap) 0; position: sticky; top: 0; z-index: 10; background: #fff; }
  .app-tabs button { flex: 1; height: 2.75em; border-radius: 999px; border: 1px solid var(--border); font-size: .9em; transition: var(--anim-fast); }
  .app-tabs button.is-active { background: var(--c-dark); color: #fff; border-color: var(--c-dark); }
  .panel { order: 3; overflow: visible; border: 0 !important; padding: 1.25em var(--gap) 3em; }
  .panel[data-panel]:not(.is-shown) { display: none; }
  .shortcuts-btn { display: none; }
  .transport { left: .6em; right: .6em; bottom: .6em; gap: .5em; padding: .4em .7em .4em .4em; flex-wrap: wrap; border-radius: 22px; }
  .tp-buttons [data-act="start"], .tp-buttons [data-act="end"] { display: none; }
  .timeline { order: 5; flex-basis: 100%; height: 2em; margin: 0 .4em; }
  .tp-readout { min-width: 0; flex: 1; }
  .toast { bottom: 8em; }
  .vp-top { left: .6em; right: .6em; top: .6em; flex-wrap: wrap; }
  .vp-views button, .vp-quick button { padding: 0 .65em; }
  .vp-legend { top: 7.2em; }
}
@media (max-width: 480px) {
  .vp-views [data-view="back"], .vp-views [data-view="top"] { display: none; }
}

/* ------------------------- Publish -------------------------------------------------- */

.export .publish-btn { width: 100%; justify-content: center; }
.publish-card { width: min(56em, 100%); max-height: calc(100% - 1em); overflow-y: auto; }
.pub-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.75em; margin-top: .5em; }
.pub-preview { aspect-ratio: 5 / 4; border-radius: 10px; overflow: hidden; background: var(--c-light); margin-bottom: .6em; }
.pub-preview img, .pub-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-fields { display: flex; flex-direction: column; gap: 1em; }
.pub-row { display: grid; grid-template-columns: 1fr auto; gap: 1em; }
.pub-field { display: flex; flex-direction: column; gap: .4em; font-size: .82em; color: #5b5d63; }
.pub-field em { font-style: normal; color: var(--c-gray); }
.pub-field input:not([type=radio]):not([type=number]), .pub-field textarea {
  border: 1px solid var(--border); border-radius: 10px; padding: .75em .9em; font: inherit; font-size: 1.15em; color: var(--c-dark); outline: 0; resize: vertical;
  transition: border-color .25s, box-shadow .25s;
}
.pub-field input:focus, .pub-field textarea:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(69, 92, 233, .12); }
.pub-field select { width: 100%; font-size: 1.1em; }
.tag-input { display: flex; flex-wrap: wrap; gap: .35em; align-items: center; min-height: 3em; padding: .4em .5em; border: 1px solid var(--border); border-radius: 10px; cursor: text; }
.tag-input:focus-within { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(69, 92, 233, .12); }
.tag-input input { flex: 1; min-width: 8em; border: 0 !important; box-shadow: none !important; padding: .3em .4em !important; font-size: 1.1em; }
.tag-chip { display: inline-flex; align-items: center; gap: .35em; height: 2.1em; padding: 0 .8em; border-radius: 999px; background: var(--c-dark); color: #fff; font-size: 1em; }
.pub-price { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.pub-foot { display: flex; align-items: center; justify-content: flex-end; gap: 1em; margin-top: 1.5em; flex-wrap: wrap; }
.pub-foot .gen-progress { flex: 1 1 100%; }
.pub-foot [hidden] { display: none; }
.pub-error { flex: 1; color: #e5484d; font-size: .88em; }
[data-pub-submit][disabled] { opacity: .6; pointer-events: none; }
@media (max-width: 720px) { .pub-grid { grid-template-columns: 1fr; } }

.empty-mark svg { width: 46%; height: 46%; animation: spin 8s linear infinite; }
.empty-mark svg path:last-child { fill: var(--c-dark); }