/* Video editor page. Theme variables, the Miami scene and the site tabs come from style.css (CSP-safe: no inline styles).
   Everything inside .ed is restyled here: clean sans-serif, big touch targets, sentence-case buttons, no glitch effects. */
main:has(.ed) { justify-content: flex-start; }
.ed {
  --r: 14px; --card: rgba(22, 8, 56, 0.86); --edge: rgba(255, 255, 255, 0.14); --soft: rgba(255, 255, 255, 0.06);
  --txt: #fff0f8; --mut: #cdb6e6;
  width: min(1060px, 100%); display: grid; gap: 18px; padding-block: 28px 8px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5; color: var(--txt);
}
.ed .panel { padding: 22px; border: 1px solid var(--edge); border-radius: var(--r); background: var(--card); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.ed h2 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; color: var(--txt); letter-spacing: 0; }

/* ---- reset the retro look of the shared controls, only inside the editor ---- */
.ed label { display: grid; gap: 6px; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--txt); }
.ed .lt { font-weight: 600; font-size: 0.92rem; }
.ed .lt em, .ed summary em { font-weight: 400; font-style: normal; color: var(--mut); }
.ed .rv { float: right; font-weight: 400; font-style: normal; color: var(--mut); }
.ed input, .ed select {
  font: inherit; font-size: 1rem; color: var(--txt); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--edge); border-radius: 10px; padding: 11px 12px; min-height: 46px; width: 100%;
}
.ed select { appearance: auto; }
.ed input:focus, .ed select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 63, 164, 0.25); outline: none; }
.ed input[type="range"] { padding: 0; min-height: 32px; accent-color: var(--pink); background: transparent; border: 0; box-shadow: none; }
.ed button, .ed .btn {
  font: inherit; font-size: 0.95rem; font-weight: 600; text-transform: none; letter-spacing: 0; min-height: 46px; padding: 10px 16px; border-radius: 10px; color: var(--txt);
  background: var(--soft); border: 1px solid var(--edge); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .ed button:hover:not(:disabled), .ed .btn:hover { background: rgba(255, 255, 255, 0.14); box-shadow: none; } }
.ed button:disabled { opacity: 0.45; }
.ed button.primary, .ed .btn.big {
  color: #fff; border-color: transparent; background: linear-gradient(135deg, #ff3fa4, #8a3cff); box-shadow: 0 6px 20px rgba(255, 63, 164, 0.35);
}
@media (hover: hover) { .ed button.primary:hover:not(:disabled), .ed .btn.big:hover { background: linear-gradient(135deg, #ff63b5, #9b57ff); box-shadow: 0 8px 26px rgba(255, 63, 164, 0.5); } }
.ed button.primary::after { content: none; animation: none; }
.ed .big { min-height: 54px; font-size: 1.05rem; width: 100%; }
.ed button.link { background: none; border: 0; min-height: 0; padding: 4px 2px; color: var(--mut); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .ed button.link:hover:not(:disabled) { background: none; color: #fff; } }
.ed button:focus-visible, .ed summary:focus-visible, .ed #drop:focus-visible { outline: 2px solid var(--pink-soft); outline-offset: 2px; }

.meta { margin: 8px 0 0; font-size: 0.85rem; color: var(--mut); line-height: 1.5; overflow-wrap: anywhere; }
.msg { margin: 0; font-size: 0.95rem; color: var(--txt); }
.msg.err { color: #ff8a98; }
.msg.ok { color: var(--ok); }

/* ---- header ---- */
.ed-head { display: grid; gap: 12px; justify-items: center; text-align: center; animation: fadeIn 0.5s ease both; }
.ed-head .sub { max-width: 600px; margin: 0; font-size: 1.05rem; color: var(--mut); }
.eyebrow { display: inline-block; padding: 5px 14px; border: 1px solid var(--edge); border-radius: 99px; background: rgba(20, 6, 52, 0.6); color: var(--teal); font-size: 0.78rem; }
.ed-head h1 { animation: riseIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ed-head .tabs { margin-top: 4px; }

/* progress steps: the current one is lit, finished ones are ticked */
.steps { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; list-style: none; margin: 4px 0 0; padding: 0; }
.steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--edge); border-radius: 99px; background: rgba(20, 6, 52, 0.6); font-size: 0.85rem; color: var(--mut); }
.steps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--soft); color: var(--mut); font-size: 0.8rem; }
.steps li.now { color: #fff; border-color: var(--pink); }
.steps li.now b { background: linear-gradient(135deg, var(--pink), #8a3cff); color: #fff; }
.steps li.done { color: var(--ok); }
.steps li.done b { background: var(--ok); color: #05281a; font-size: 0; }
.steps li.done b::before { content: "\2713"; font-size: 0.85rem; }

/* ---- drop zone ---- */
#drop { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 48px 20px; border: 2px dashed rgba(46, 242, 224, 0.5); cursor: pointer; background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 63, 164, 0.18), transparent 70%); transition: transform 0.2s, border-color 0.2s; }
#drop .up { color: var(--teal); }
#drop strong { font-size: 1.2rem; color: #fff; }
#drop span { color: var(--mut); font-size: 0.95rem; }
#drop:hover, #drop.on { border-color: var(--pink); }
#drop.on { transform: scale(1.01); }
.ed.has-video #drop { padding: 16px 20px; }
.ed.has-video #drop .up, .ed.has-video #drop span { display: none; }
.ed.has-video #drop strong { font-size: 0.95rem; }

/* ---- workspace ---- */
.work { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.work[hidden], .form[hidden], #res[hidden], #dm[hidden], #dmxbox[hidden], .sbar[hidden], #cancel[hidden], .ownform[hidden], .ownon[hidden], .owner[hidden], .mode button[hidden] { display: none; }
.left { display: grid; gap: 6px; align-content: start; position: sticky; top: 12px; }
.ed video { width: 100%; max-height: 440px; background: #000; border: 1px solid var(--edge); border-radius: 12px; display: block; }
.left .link { justify-self: start; }
.side { display: grid; gap: 16px; }

.mode { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.mode button { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px 14px; min-height: 0; background: var(--soft); border: 2px solid transparent; }
.mode button b { font-size: 1rem; }
.mode button small { font-size: 0.78rem; font-weight: 400; color: var(--mut); line-height: 1.3; }
.mode button[aria-selected="true"] { border-color: var(--pink); background: rgba(255, 63, 164, 0.16); }
.form { display: grid; gap: 14px; animation: fadeIn 0.3s ease both; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label.chk { display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; min-height: 36px; }
label.chk input { width: 20px; min-height: 0; height: 20px; flex: none; accent-color: var(--pink); }

.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.presets legend { padding: 0 0 8px; font-weight: 600; font-size: 0.95rem; }
.presets .pre { display: block; position: relative; cursor: pointer; }
.presets .pre input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.presets .pre span { display: block; text-align: center; padding: 14px 4px; border: 2px solid var(--edge); border-radius: 12px; background: var(--soft); font-size: 1.1rem; font-weight: 700; transition: background 0.2s, border-color 0.2s; }
.presets .pre input:checked + span { background: linear-gradient(135deg, #ff3fa4, #8a3cff); border-color: transparent; color: #fff; }
.presets .pre input:focus-visible + span { outline: 2px solid var(--pink-soft); outline-offset: 2px; }
.presets .pre input:disabled + span { opacity: 0.5; cursor: not-allowed; }

/* collapsible groups keep long forms short */
details.more { border: 1px solid var(--edge); border-radius: 12px; background: var(--soft); }
details.more > summary { cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; border-radius: 12px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "\25BE"; color: var(--mut); transition: transform 0.2s; }
details.more[open] > summary::after { transform: rotate(180deg); }
details.more .inner { display: grid; gap: 12px; padding: 0 16px 16px; }

.tlbox { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--soft); }
.tlhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tlhead .meta { margin: 0; }
.tl { display: flex; flex-wrap: wrap; gap: 8px; }
.tl:empty { display: none; }
.tl .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border: 1px solid var(--edge); border-radius: 99px; background: rgba(0, 0, 0, 0.3); font-size: 0.88rem; cursor: pointer; }
.tl .chip button { min-height: 34px; width: 34px; padding: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; }
.own-note { margin: 0; padding: 10px 14px; border: 1px solid rgba(125, 255, 192, 0.4); border-radius: 12px; background: rgba(125, 255, 192, 0.08); font-size: 0.9rem; color: var(--ok); }
.own-note .dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ok); }

/* ---- status bar: stays on screen while working ---- */
.sbar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 6; padding: 12px 16px; border: 1px solid var(--edge); border-radius: var(--r); background: rgba(14, 4, 38, 0.96); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); display: grid; gap: 10px; }
.pbar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--pink)); transition: width 0.2s; }
.srow { display: flex; align-items: center; gap: 12px; }
.srow .msg { flex: 1; min-width: 0; }
.srow button { flex: none; }
#sclose { font-size: 1.4rem; padding: 0 8px; text-decoration: none; }
#res { animation: popIn 0.4s ease both; display: grid; gap: 8px; }
#res h2 { margin: 0; }
#res p { margin: 6px 0 0; }

/* ---- highlights ---- */
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.perks li { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--edge); border-radius: var(--r); background: var(--card); font-size: 0.92rem; line-height: 1.5; color: var(--mut); }
.perks b { color: #fff; font-size: 1rem; }

/* ---- gallery ---- */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.gal article { border: 1px solid var(--edge); border-radius: 12px; padding: 10px; background: rgba(0, 0, 0, 0.25); display: grid; gap: 6px; align-content: start; }
.gal h3 { margin: 4px 0 0; font-size: 1rem; color: #fff; overflow-wrap: anywhere; }
.gal .act { display: flex; gap: 8px; flex-wrap: wrap; }
.gal .act button, .gal .act a { min-height: 40px; padding: 6px 14px; font-size: 0.85rem; }

/* ---- review panel ---- */
#dm { display: grid; gap: 14px; animation: riseIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.dmhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.dmhead h2 { margin: 0; }
.badge { display: inline-block; padding: 4px 12px; border: 1px solid var(--edge); border-radius: 99px; font-size: 0.8rem; }
.badge.local { border-color: var(--teal); color: var(--teal); }
.badge.even { border-color: #ff8a98; color: #ff8a98; }
.warns { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.warns:empty { display: none; }
.warns li { padding: 10px 12px; border: 1px solid #ff8a98; border-radius: 10px; background: rgba(255, 90, 110, 0.1); font-size: 0.9rem; }
.warns li.note { border-color: var(--edge); background: rgba(46, 242, 224, 0.08); }
.trackwrap { border: 1px solid var(--edge); border-radius: 10px; background: rgba(0, 0, 0, 0.35); padding: 6px; }
#trk { display: block; width: 100%; height: 72px; cursor: pointer; touch-action: manipulation; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8rem; color: var(--mut); }
.legend .k::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; }
.legend .use::before { background: rgba(255, 63, 164, 0.75); }
.legend .act::before { background: rgba(46, 242, 224, 0.8); }
.legend .dead::before { background: rgba(160, 150, 190, 0.45); }
.legend .load::before { background: rgba(255, 200, 80, 0.55); }
.dmbar { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dmbar .meta { margin: 0; }
.dmbar .meta.warn { color: #ffb86b; }
.sb { display: flex; gap: 4px; min-height: 48px; border: 1px solid var(--edge); border-radius: 12px; padding: 5px; background: rgba(0, 0, 0, 0.3); }
.sb .blk { flex: 0 0 auto; min-width: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; font-size: 0.85rem; font-weight: 700; cursor: pointer; background: rgba(255, 63, 164, 0.45); }
.sb .blk.auto { background: rgba(46, 242, 224, 0.22); border-color: var(--teal); }
.sb .blk.user { background: rgba(255, 63, 164, 0.65); }
.sb .blk.even { background: rgba(255, 90, 110, 0.25); border-color: #ff8a98; }
.sb .blk.on { box-shadow: 0 0 0 2px #fff; }
.sb:empty::before { content: "No clips yet"; color: var(--mut); font-size: 0.85rem; padding: 6px; }
.dmact { display: flex; flex-wrap: wrap; gap: 8px; }
.cl { display: grid; gap: 12px; }
.card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.card.on { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }
.card .top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.card .top b { font-size: 1rem; overflow-wrap: anywhere; }
.card .tag { position: static; display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 99px; background: none; font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: var(--teal); transform: none; }
.card .tag.user { color: var(--pink-soft); }
.card .tag.even { color: #ff8a98; }
.card .btns { display: flex; gap: 6px; flex-wrap: wrap; }
.card .btns button { min-height: 40px; min-width: 40px; padding: 4px 10px; }
.card .row { display: grid; grid-template-columns: 1fr 1fr 1.8fr; gap: 10px; align-items: end; }
.card .row label { font-size: 0.82rem; }
.card .row input { padding: 8px 10px; min-height: 42px; font-size: 0.95rem; }
.exportbar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; padding-top: 4px; }

/* ---- owner area in the footer ---- */
.owner { margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; }
.owner button.link { font: inherit; font-size: 0.85rem; text-transform: none; letter-spacing: 0; background: none; border: 0; box-shadow: none; padding: 4px 6px; min-height: 0; color: var(--pink-soft); opacity: 0.8; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.owner button.link:hover { background: none; box-shadow: none; opacity: 1; }
.ownform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.ownform input { width: 220px; min-height: 42px; padding: 8px 12px; font: inherit; color: var(--txt); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--edge); border-radius: 10px; }
.ownform .primary { min-height: 42px; padding: 6px 16px; border-radius: 10px; font: inherit; font-weight: 600; color: #fff; border: 0; background: linear-gradient(135deg, #ff3fa4, #8a3cff); text-transform: none; letter-spacing: 0; }
.ownform .msg { font-size: 0.85rem; }
.ownon { color: var(--ok); }

/* ---- phones ---- */
@media (max-width: 800px) {
  .work { grid-template-columns: 1fr; }
  .left { position: static; }
}
@media (max-width: 700px) {
  .ed { padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .ed-head { animation: none; }
  .ed-head .tabs { animation: barUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .eyebrow { font-size: 0.7rem; padding: 4px 10px; }
  .steps { gap: 6px; flex-wrap: nowrap; }
  .steps li { padding: 4px 10px 4px 4px; gap: 6px; font-size: 0.72rem; }
  .steps li span { display: none; }
  .steps li.now span { display: inline; }
  .steps b { width: 22px; height: 22px; font-size: 0.72rem; }
  .ed .panel { padding: 16px; }
  #drop { padding: 34px 14px; }
  .two { grid-template-columns: 1fr; }
  .mode { grid-auto-flow: row; }
  .card .row { grid-template-columns: 1fr 1fr; }
  .card .row label:last-of-type { grid-column: 1 / -1; }
  .sbar, .exportbar { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }   /* stay above the fixed bottom tab bar */
  main:has(.ed) footer { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-head, .ed-head h1, .ed-head .tabs, #drop, .form, #res, #dm { animation: none !important; }
  #drop, .presets .pre span, .pbar i, details.more > summary::after { transition: none; }
}