/* "Loop" tab (#tab-loop) rebuilt 2026-10-10 like the GIF optimizer (owner: "make it great"). One column: stage
   (drop zone -> source + timeline -> result) -> "How should it loop?" cards + segmented settings -> action bar.
   Markup in app.html (.lpx), logic js/seamless-loop.js (ids unchanged), cards/buttons js/loop-studio.js.
   Loaded after seamless-loop.css, so the older .loop-* rules are overridden here; prefix lpx-. */
#tab-loop [hidden]{display:none!important}
#tab-loop .lpx{--lpx-cyan:#1fc9f1;--lpx-violet:#8a7dff;--lpx-line:rgba(110,170,255,.18);--lpx-muted:rgba(214,229,250,.64);
  display:grid;gap:16px;max-width:1240px;margin:0 auto;font-family:Montserrat,system-ui,sans-serif;color:#e9f3ff}
#tab-loop .lpx *{font-family:inherit}
#tab-loop .lpx-panel{display:grid;gap:16px;min-width:0}
#tab-loop .lpx-native{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;border:0!important;opacity:0!important;pointer-events:none!important}

/* lock (guest / week used) */
/* the lock card already says what the free-plan note says: show one of them */
#tab-loop:has(#loopLock:not([hidden])) .fl-note{display:none!important}
#tab-loop .lpx-lock{display:grid;gap:6px;padding:22px 24px;border:1px solid rgba(255,200,87,.35);border-left:1px solid rgba(255,200,87,.35);border-radius:18px;
  background:linear-gradient(135deg,rgba(255,200,87,.1),rgba(138,125,255,.08)),rgba(5,10,28,.9)}
#tab-loop .lpx-lock b{color:#ffe1a3;font-size:17px;font-weight:800}
#tab-loop .lpx-lock span{color:var(--lpx-muted);font-size:13.5px;line-height:1.5}

/* stage */
#tab-loop .lpx-stage{position:relative;display:grid;min-height:380px;padding:0;border:1px solid var(--lpx-line);border-radius:22px;overflow:hidden;
  background:radial-gradient(80% 120% at 15% 0%,rgba(31,201,241,.12),transparent 55%),radial-gradient(70% 110% at 100% 100%,rgba(138,125,255,.14),transparent 55%),
  linear-gradient(160deg,rgba(12,22,52,.9),rgba(4,8,22,.96))}
#tab-loop .lpx-stage::after{content:"";position:absolute;inset:10px;border:2px dashed transparent;border-radius:16px;pointer-events:none;transition:border-color .15s,background .15s}
#tab-loop .lpx-stage.is-drag::after,#tab-loop .lpx-stage:has(.lpx-drop.over)::after{border-color:var(--lpx-cyan);background:rgba(31,201,241,.06)}

/* empty: drop zone */
#tab-loop .lpx-empty{display:grid;min-height:0;place-content:stretch;gap:0;text-align:center}
#tab-loop .lpx-drop{display:grid;place-items:center;align-content:center;gap:14px;width:100%;min-height:330px;padding:44px 24px 18px;border:0!important;
  background:none!important;color:#e9f3ff;text-align:center;cursor:pointer;outline:0}
#tab-loop .lpx-drop__icon{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:30px;
  background:linear-gradient(135deg,rgba(31,201,241,.22),rgba(138,125,255,.28));box-shadow:0 0 0 1px rgba(127,233,255,.3),0 20px 60px rgba(31,201,241,.18);
  font:300 66px/1 Montserrat,system-ui,sans-serif!important;color:transparent!important;
  background-clip:padding-box}
#tab-loop .lpx-drop__icon::after{content:"∞";position:absolute;inset:0;display:grid;place-items:center;padding-bottom:6px;font:600 64px/1 Montserrat,system-ui,sans-serif;
  background:linear-gradient(135deg,#7fe9ff,#c4b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#tab-loop .lpx-drop__icon::before{content:"";position:absolute;inset:-10px;border-radius:38px;border:1px solid rgba(127,233,255,.18);animation:lpx-pulse 2.8s ease-in-out infinite}
@keyframes lpx-pulse{0%,100%{opacity:.3;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
#tab-loop .lpx-drop strong{max-width:520px;font-size:24px;font-weight:800;line-height:1.25;color:#f4f9ff}
#tab-loop .lpx-drop__btn{display:inline-flex;align-items:center;min-height:46px;padding:0 26px;border-radius:13px;background:linear-gradient(135deg,var(--lpx-cyan),var(--lpx-violet));
  color:#041019!important;font:800 14.5px Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;box-shadow:0 10px 28px rgba(31,201,241,.25);transition:transform .15s}
#tab-loop .lpx-drop:hover .lpx-drop__btn,#tab-loop .lpx-drop:focus-visible .lpx-drop__btn{transform:translateY(-2px)}
#tab-loop .lpx-drop:focus-visible .lpx-drop__icon{box-shadow:0 0 0 2px #7fe9ff,0 20px 60px rgba(31,201,241,.25)}
#tab-loop .lpx-drop small{max-width:560px;color:var(--lpx-muted)!important;font:500 12.5px/1.5 Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
#tab-loop .lpx-link{justify-self:center;margin:0 0 26px;padding:6px 10px;border:0;border-radius:8px;background:none;color:#8fe6ff;font-size:13px;font-weight:700;
  text-decoration:underline;text-decoration-color:rgba(127,233,255,.35);text-underline-offset:4px;cursor:pointer}
#tab-loop .lpx-link:hover{color:#fff;text-decoration-color:#7fe9ff}

/* source: file chip, viewer, timeline */
#tab-loop .lpx-source{display:grid;gap:12px;padding:14px;min-width:0}
#tab-loop .lpx-file{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 6px 6px 8px;border:1px solid var(--lpx-line);border-radius:14px;background:rgba(2,6,18,.6)}
#tab-loop .lpx-file__icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,rgba(31,201,241,.25),rgba(138,125,255,.3));color:#dff8ff;font-size:22px;font-weight:600;line-height:1}
#tab-loop .lpx-file__text{display:grid;gap:1px;flex:1 1 auto;min-width:0}
#tab-loop .lpx-file__text b.loop-file{min-height:0;padding:0;overflow:hidden;color:#f4f9ff;font:700 13.5px Montserrat,system-ui,sans-serif!important;text-overflow:ellipsis;white-space:nowrap}
#tab-loop .lpx-file__text small{color:var(--lpx-muted);font-size:12px}
#tab-loop .lpx-file__change{flex:none;min-height:34px;padding:0 12px;border:1px solid rgba(110,170,255,.26);border-radius:10px;background:rgba(2,6,18,.6);color:#dbe9ff;font-size:12.5px;font-weight:700;cursor:pointer}
#tab-loop .lpx-file__change:hover{border-color:rgba(31,201,241,.6);color:#fff}
#tab-loop .lpx-viewer{min-height:0;border:0;border-radius:12px;background:repeating-conic-gradient(#0b1224 0 25%,#0f1830 0 50%) 0 0/18px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
#tab-loop .lpx-viewer video,#tab-loop .lpx-viewer img{width:100%;max-height:min(56vh,520px);object-fit:contain}
#tab-loop .loop-play{display:grid;place-items:center;width:44px!important;height:44px!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.92)!important;color:#061019!important;font:800 14px/1 Montserrat,system-ui,sans-serif!important;
  box-shadow:0 6px 18px rgba(0,0,0,.45)}
#tab-loop .loop-play:hover,#tab-loop .loop-play:focus-visible{background:#fff!important;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 4px rgba(31,201,241,.35)}
#tab-loop .loop-editor{margin:0;padding:14px 16px 12px;border:1px solid var(--lpx-line);border-radius:14px;background:rgba(2,6,18,.55)}
#tab-loop .loop-editor__head{color:#dbe9ff;font:700 13px Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
#tab-loop .loop-editor__head b{flex:none;white-space:nowrap;padding:3px 9px;border-radius:999px;background:rgba(31,201,241,.12);color:#9ff0ff;font-size:12px;font-variant-numeric:tabular-nums}
#tab-loop .loop-timeline{height:78px;margin-top:12px;border:1px solid rgba(110,170,255,.2);border-radius:10px;overflow:visible;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(109,148,167,.1) calc(10% - 1px) 10%),linear-gradient(180deg,#0b1730,#060d1e)}
#tab-loop .loop-timeline:before{top:38px;background:rgba(110,170,255,.18)}
#tab-loop .loop-timeline__ticks span{top:-24px;white-space:nowrap;color:rgba(214,229,250,.5);font:600 10px Montserrat,system-ui,sans-serif!important;font-variant-numeric:tabular-nums}
#tab-loop .loop-timeline__ticks i{background:rgba(110,170,255,.28)}
#tab-loop .loop-timeline__selection{top:26px;height:28px;border:1px solid var(--lpx-cyan);border-radius:6px;
  background:linear-gradient(90deg,rgba(31,201,241,.24),rgba(138,125,255,.24));box-shadow:0 0 18px rgba(31,201,241,.15)}
#tab-loop .loop-handle{top:18px;bottom:6px;width:16px;border:0;border-radius:6px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.45),0 0 0 2px rgba(31,201,241,.6)}
#tab-loop .loop-handle span{top:50%;left:5px;height:14px;margin-top:-7px;border-inline:1.5px solid rgba(6,16,25,.55)}
#tab-loop .loop-handle:focus-visible{outline:2px solid #7fe9ff;outline-offset:2px}
#tab-loop .loop-editor__meta{gap:8px;margin-top:10px;background:none}
#tab-loop .loop-editor__meta>span{gap:3px;padding:9px 12px;border:1px solid rgba(110,170,255,.14);border-radius:10px;background:rgba(2,6,18,.5)}
#tab-loop .loop-editor__meta small{color:var(--lpx-muted);font:600 11px Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
#tab-loop .loop-editor__meta b{color:#f4f9ff;font:800 14px Montserrat,system-ui,sans-serif!important;font-variant-numeric:tabular-nums}
#tab-loop .loop-editor>p{color:var(--lpx-muted);font-size:12px;line-height:1.45}

/* result */
#tab-loop .loop-result{display:grid;gap:12px;padding:14px;min-width:0}
#tab-loop .loop-result__badge{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0;color:#9ff7d2;font:800 14px Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
#tab-loop .loop-result__badge i{width:9px;height:9px;border-radius:50%;background:#5ff2b5;box-shadow:0 0 10px #5ff2b5}
#tab-loop .loop-result.is-preview .loop-result__badge{color:#c4b8ff}
#tab-loop .loop-result.is-preview .loop-result__badge i{background:#a99dff;box-shadow:0 0 10px #a99dff}
#tab-loop .lpx-back{margin-left:auto;min-height:34px;padding:0 12px;border:1px solid rgba(110,170,255,.26);border-radius:10px;background:rgba(2,6,18,.6);color:#dbe9ff;
  font:700 12.5px Montserrat,system-ui,sans-serif!important;cursor:pointer}
#tab-loop .lpx-back::before{content:"← "}
#tab-loop .lpx-back:hover{border-color:rgba(31,201,241,.6);color:#fff}
#tab-loop .loop-result video,#tab-loop .loop-result img{justify-self:center;width:auto;max-width:100%;max-height:min(58vh,540px);border:0;border-radius:12px;
  background:repeating-conic-gradient(#0b1224 0 25%,#0f1830 0 50%) 0 0/18px 18px;box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
#tab-loop .loop-result.is-preview video{width:min(100%,760px)}
#tab-loop .loop-result__actions{flex-wrap:wrap;justify-content:center;gap:10px;margin:2px 0 0}
#tab-loop .loop-result__actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:13px}
#tab-loop #loopDownload{border:1px solid rgba(95,242,181,.55)!important;background:rgba(95,242,181,.12)!important;color:#bdfbe2!important;box-shadow:none!important}
#tab-loop #loopDownload:hover{background:rgba(95,242,181,.2)!important}
#tab-loop .loop-result>p{margin:0;text-align:center;color:var(--lpx-muted);font-size:12.5px;line-height:1.45}

/* settings card */
#tab-loop .lpx-card{position:relative;display:grid;gap:14px;padding:18px;border:1px solid var(--lpx-line);border-radius:18px;background:linear-gradient(160deg,rgba(12,22,52,.8),rgba(5,10,28,.9))}
#tab-loop .lpx-h{margin:0;font:800 17px/1.3 Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#f4f9ff}
#tab-loop .lpx-h::before{display:none!important}
#tab-loop .lpx-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#tab-loop .lpx-goal{position:relative;display:grid;align-content:start;gap:8px;min-width:0;padding:14px 16px;border:1px solid rgba(110,170,255,.16);border-radius:14px;
  background:rgba(2,6,18,.45);color:#e9f3ff;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
#tab-loop .lpx-goal:hover{border-color:rgba(31,201,241,.5);transform:translateY(-2px)}
#tab-loop .lpx-goal:focus-visible{outline:2px solid #7fe9ff;outline-offset:2px}
#tab-loop .lpx-goal.is-on{border-color:var(--lpx-cyan);background:linear-gradient(135deg,rgba(31,201,241,.12),rgba(138,125,255,.14));box-shadow:inset 0 0 0 1px rgba(31,201,241,.35)}
#tab-loop .lpx-goal__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
#tab-loop .lpx-goal__head b{min-width:0;font-size:15px;font-weight:800;line-height:1.25}
#tab-loop .lpx-goal__icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(31,201,241,.12);color:#7fe9ff;font-size:20px;font-weight:700;line-height:1}
#tab-loop .lpx-goal.is-on .lpx-goal__icon{background:linear-gradient(135deg,var(--lpx-cyan),var(--lpx-violet));color:#041019}
#tab-loop .lpx-goal__badge{margin-left:auto;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,var(--lpx-cyan),var(--lpx-violet));
  color:#041019;font-size:10.5px;font-weight:800;line-height:1.3;text-align:center}
#tab-loop .lpx-goal small{color:var(--lpx-muted);font-size:12.5px;line-height:1.5}
#tab-loop .lpx-settings{display:flex;flex-wrap:wrap;gap:12px 22px;padding-top:14px;border-top:1px solid rgba(110,170,255,.12)}
#tab-loop .lpx-setting{display:grid;gap:7px;min-width:0}
#tab-loop .lpx-setting__label{color:var(--lpx-muted);font-size:12px;font-weight:700}
#tab-loop .lpx-seg{display:inline-flex;flex-wrap:wrap;max-width:100%;padding:3px;border:1px solid var(--lpx-line);border-radius:12px;background:rgba(2,6,18,.6)}
#tab-loop .lpx-seg__btn{min-height:34px;padding:0 13px;border:0;border-radius:9px;background:none;color:var(--lpx-muted);font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;transition:color .15s,background .15s}
#tab-loop .lpx-seg__btn:hover{color:#fff}
#tab-loop .lpx-seg__btn:focus-visible{outline:2px solid #7fe9ff;outline-offset:1px}
#tab-loop .lpx-seg__btn.is-on{background:linear-gradient(135deg,var(--lpx-cyan),var(--lpx-violet));color:#041019}

/* actions */
#tab-loop .lpx-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:2px 0 0}
#tab-loop .lpx-actions .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:220px;min-height:52px;margin:0;padding:0 26px;border-radius:14px;
  font:800 15px Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;transition:transform .15s,box-shadow .15s}
#tab-loop .lpx-run{border:0!important;background:linear-gradient(135deg,var(--lpx-cyan),var(--lpx-violet))!important;color:#041019!important;box-shadow:0 12px 30px rgba(31,201,241,.25)!important}
#tab-loop .lpx-run:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 36px rgba(31,201,241,.32)!important}
#tab-loop .lpx-preview{border:1px solid rgba(138,125,255,.5)!important;background:rgba(138,125,255,.1)!important;color:#ddd7ff!important;box-shadow:none!important}
#tab-loop .lpx-preview:hover:not(:disabled){transform:translateY(-2px);background:rgba(138,125,255,.18)!important}
#tab-loop .lpx-actions .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none!important}
#tab-loop .lpx-progress{justify-self:center;width:min(520px,100%);height:6px;margin:0;border-radius:999px;background:rgba(110,170,255,.14)}
#tab-loop .lpx-progress i{border-radius:inherit;background:linear-gradient(90deg,var(--lpx-cyan),var(--lpx-violet));box-shadow:0 0 12px rgba(31,201,241,.5)}
#tab-loop .lpx-progress:not(:has(i[style*="width"])){display:none}
#tab-loop #loopStatus{min-height:1.4em;margin:0;text-align:center!important;color:#c9dcf4;font-size:13.5px;font-weight:600}
#tab-loop #loopStatus:empty{display:none}
#tab-loop #loopStatus.ok{color:#9ff7d2}
#tab-loop #loopStatus.err{color:#ff9aaa}
#tab-loop .lpx-foot{margin:-4px auto 0;max-width:620px;text-align:center;color:var(--lpx-muted);font-size:12px;line-height:1.5}

@media (max-width:760px){
  #tab-loop .lpx-goals{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  html body #tab-loop.tab{padding-left:0!important;padding-right:0!important}
  #tab-loop .lpx-stage{min-height:300px;border-radius:18px}
  #tab-loop .lpx-drop{min-height:270px;padding:32px 16px 14px}
  #tab-loop .lpx-drop__icon{width:88px;height:88px;border-radius:24px}
  #tab-loop .lpx-drop__icon::after{font-size:50px}
  #tab-loop .lpx-drop strong{font-size:19px}
  #tab-loop .lpx-source,#tab-loop .loop-result{padding:10px}
  #tab-loop .loop-editor{padding:12px}
  #tab-loop .loop-editor__meta{gap:6px}
  #tab-loop .loop-editor__meta>span{padding:8px}
  #tab-loop .loop-editor__meta b{font-size:12.5px}
  #tab-loop .lpx-card{padding:14px}
  #tab-loop .lpx-settings{display:grid;grid-template-columns:minmax(0,1fr)}
  #tab-loop .lpx-seg{display:flex}
  #tab-loop .lpx-seg__btn{flex:1 1 auto;padding:0 8px}
  #tab-loop .lpx-actions .btn{width:100%;min-width:0}
  #tab-loop .lpx-back{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  #tab-loop .lpx-drop__icon::before{animation:none}
  #tab-loop .lpx-goal,#tab-loop .lpx-actions .btn{transition:none}
}