/* KB_RANKMAKER: CapCut / Kapwing-inspired ranking editor. Dark, thumb-first, no lag. */
.rm-app{
  --rm-bg:#0b0b0f;--rm-card:#16161d;--rm-line:#2a2a33;--rm-gold:#ffd60a;--rm-tx:#f4f4f5;--rm-dim:#a1a1aa;
  --rm-r:16px; color:var(--rm-tx); background:var(--rm-bg); border-radius:18px; overflow:hidden;
  contain:layout style; min-height:calc(100dvh - 64px);
}
.rm-app *{box-sizing:border-box}
.rm-app button,.rm-app input,.rm-app select{font:inherit;color:inherit}
.rm-start{padding:28px 18px 36px;max-width:640px;margin:0 auto;text-align:center}
.rm-kicker{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--rm-gold);margin:0 0 8px;font-weight:700}
.rm-h{margin:0 0 8px;font-size:1.6rem;line-height:1.2}
.rm-lead{margin:0 0 22px;color:var(--rm-dim);font-size:.98rem}
.rm-paste{display:flex;gap:8px;background:var(--rm-card);border:1px solid var(--rm-line);border-radius:999px;padding:6px 6px 6px 16px}
.rm-paste input{flex:1;min-width:0;background:none;border:0;outline:0;padding:10px 0}
.rm-addbtn{border-radius:999px;padding:10px 18px;flex:none}
.rm-or{display:flex;align-items:center;gap:12px;color:var(--rm-dim);margin:16px 0;font-size:.85rem}
.rm-or:before,.rm-or:after{content:"";flex:1;height:1px;background:var(--rm-line)}
.rm-up{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border:1.5px dashed var(--rm-line);
  border-radius:var(--rm-r);background:var(--rm-card);cursor:pointer}
.rm-up:hover,.rm-up:focus-within{border-color:var(--rm-gold)}
.rm-up-ico{width:44px;height:44px;border-radius:50%;background:#22222b;display:grid;place-items:center;font-size:1.4rem}
.rm-up span{color:var(--rm-dim);font-size:.85rem}
.rm-notice{margin:18px 0 0;color:var(--rm-dim);font-size:.82rem;line-height:1.45}
.rm-notice-s{margin:10px 0 0}
.rm-err{color:#fca5a5;margin:12px 0 0;font-size:.9rem}
.rm-status{color:var(--rm-dim);margin:12px 0 0;font-size:.9rem}

.rm-ed{display:flex;flex-direction:column;min-height:calc(100dvh - 64px)}
.rm-top{display:flex;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--rm-line);background:#101014;position:sticky;top:0;z-index:3}
.rm-title{flex:1;min-width:0;background:#1c1c24;border:1px solid var(--rm-line);border-radius:12px;padding:10px 12px;outline:0}
.rm-title:focus{border-color:#52525b}
.rm-export-btn{flex:none;border-radius:12px;padding:10px 16px;font-weight:700}
.rm-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0;flex:1}
.rm-preview{padding:12px 12px 8px;background:#0b0b0f}
.rm-stage{position:relative;margin:0 auto;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:9/16;width:min(100%,360px);
  box-shadow:0 8px 32px #0008;contain:strict}
.rm-stage[data-asp="16:9"]{aspect-ratio:16/9;width:min(100%,640px)}
.rm-stage video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.rm-ov{position:absolute;inset:0;pointer-events:none;z-index:1}
.rm-ov-badge,.rm-ov-poster{position:absolute;display:none;max-width:28%;height:auto;filter:drop-shadow(0 2px 6px #0008)}
.rm-ov-badge{top:4%;left:4%}
.rm-app[data-style="minimal"] .rm-ov-badge{left:auto;right:4%}
.rm-app[data-style="bar"] .rm-ov-badge{top:auto;bottom:4%;max-width:14%}
.rm-ov-poster{inset:0;margin:auto;max-width:70%;opacity:0;transition:opacity .15s linear}
.rm-ov-poster.on{display:block;opacity:1}
.rm-ov-topic,.rm-ov-cap,.rm-ov-credit{position:absolute;left:5%;right:5%;margin:0;text-shadow:0 1px 4px #000c;font-weight:700}
.rm-ov-topic{top:auto;left:5%;font-size:.78rem;opacity:.95}
.rm-ov-cap{bottom:12%;text-align:center;font-size:.92rem;background:#0007;padding:6px 10px;border-radius:8px;width:max-content;max-width:90%;
  margin-left:auto;margin-right:auto;left:0;right:0}
.rm-ov-credit{bottom:4%;text-align:center;font-size:.72rem;font-weight:600;opacity:.92}
.rm-app[data-style="bold"] .rm-ov-topic{top:22%;left:5%;right:20%;text-align:left}
.rm-app[data-style="bar"] .rm-ov-cap{bottom:5.5%;left:20%;right:5%;text-align:left;background:none;padding:0;margin:0;width:auto}
.rm-app[data-style="bar"] .rm-ov-credit{bottom:2.5%;left:20%;right:5%;text-align:left}
.rm-stage-hint{position:absolute;inset:0;display:grid;place-items:center;color:#71717a;margin:0;padding:16px;text-align:center}
.rm-stage.has-vid .rm-stage-hint{display:none}
.rm-transport{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0 4px}
.rm-ib{width:44px;height:44px;border:0;background:#1c1c24;border-radius:50%;cursor:pointer}
.rm-ib:active{transform:scale(.96)}
.rm-play{width:56px;height:56px;background:var(--rm-gold);color:#111}
.rm-time{min-width:7.5rem;font-variant-numeric:tabular-nums;color:var(--rm-dim);font-size:.85rem;margin-left:6px}

.rm-side{padding:8px 12px 88px;border-top:1px solid var(--rm-line);background:#101014}
.rm-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rm-seg{display:flex;background:#1c1c24;border-radius:12px;padding:3px;gap:2px}
.rm-seg button{border:0;background:none;color:var(--rm-dim);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:.85rem}
.rm-seg button span{display:block;font-size:.65rem;opacity:.8}
.rm-seg button.on{background:#2a2a33;color:#fff;font-weight:700}
.rm-sh{margin:10px 0 6px;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--rm-dim);font-weight:700}
.rm-styles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rm-styles button{border:1px solid var(--rm-line);background:var(--rm-card);border-radius:12px;padding:8px 4px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.75rem;color:var(--rm-dim)}
.rm-styles button.on{border-color:var(--rm-gold);color:#fff}
.rm-styles i{width:44px;height:44px;border-radius:10px;display:block;background:#0b0b0f center/contain no-repeat}
.rm-st-bold{background-image:radial-gradient(circle at 50% 50%,#ffd60a 0 36%,#111 37% 70%,transparent 71%)}
.rm-st-bar{background-image:linear-gradient(#111,#111),linear-gradient(#ffd60a,#ffd60a);background-size:100% 60%,100% 22%;background-position:center 20%,center 86%}
.rm-st-poster{background-image:linear-gradient(#111,#111);position:relative}
.rm-st-mini{box-shadow:inset 0 0 0 2px #fff8;border-radius:12px}
.rm-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.rm-mini{display:flex;flex-direction:column;gap:4px;font-size:.75rem;color:var(--rm-dim)}
.rm-mini select{background:var(--rm-card);border:1px solid var(--rm-line);border-radius:10px;padding:9px 8px;color:#fff}
.rm-clips-h{display:flex;align-items:center;justify-content:space-between}
.rm-textbtn{border:0;background:none;color:var(--rm-gold);cursor:pointer;font-weight:700;padding:8px}
.rm-clips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rm-card{background:var(--rm-card);border:1px solid var(--rm-line);border-radius:14px;padding:10px;display:grid;
  grid-template-columns:auto 64px 1fr auto;grid-template-rows:auto auto auto;gap:6px 8px;align-items:center;
  content-visibility:auto;contain-intrinsic-size:140px;touch-action:pan-y}
.rm-card.dragging{opacity:.7;box-shadow:0 8px 24px #0006}
.rm-handle{width:28px;height:44px;display:grid;place-items:center;color:#71717a;cursor:grab;touch-action:none;font-size:1.1rem}
.rm-rank{width:40px;height:40px;border-radius:50%;background:#ffd60a;color:#111;display:grid;place-items:center;
  font-weight:800;font-size:1rem;grid-column:1;grid-row:1}
.rm-handle{grid-column:1;grid-row:2}
.rm-thumb{width:64px;height:84px;object-fit:cover;border-radius:8px;background:#000;grid-column:2;grid-row:1/span 2}
.rm-meta{grid-column:3;grid-row:1;min-width:0}
.rm-name{margin:0;font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-sub{margin:2px 0 0;font-size:.75rem;color:var(--rm-dim)}
.rm-actions{grid-column:4;grid-row:1;display:flex;gap:2px}
.rm-actions button{width:40px;height:40px;border:0;background:#1c1c24;border-radius:10px;cursor:pointer;color:#ddd}
.rm-actions button[aria-pressed="true"]{background:#3f3f46;color:#ffd60a}
.rm-trim{grid-column:2/-1;grid-row:3;position:relative;height:36px;margin-top:4px;touch-action:none;user-select:none}
.rm-trim-track{position:absolute;inset:10px 0;background:#2a2a33;border-radius:999px}
.rm-trim-sel{position:absolute;top:10px;height:16px;background:var(--rm-gold);border-radius:999px}
.rm-hnd{position:absolute;top:2px;width:28px;height:32px;margin-left:-14px;background:#fff;border-radius:8px;
  box-shadow:0 1px 4px #0007;cursor:ew-resize;touch-action:none}
.rm-hnd:after{content:"";position:absolute;inset:8px 10px;border-left:2px solid #333;border-right:2px solid #333}
.rm-fields{grid-column:2/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rm-fields input{background:#1c1c24;border:1px solid var(--rm-line);border-radius:8px;padding:8px;font-size:.8rem}

.rm-dlg{border:0;border-radius:18px;padding:18px;background:#16161d;color:#fff;width:min(92vw,440px)}
.rm-dlg::backdrop{background:#0008}
.rm-seg-block{border:0;margin:0 0 12px;padding:0}
.rm-seg-block label{display:flex;align-items:center;gap:8px;padding:8px 0}
.rm-check{display:flex;gap:8px;align-items:center;margin:8px 0 14px}
.rm-bar{height:8px;background:#2a2a33;border-radius:99px;overflow:hidden}
.rm-bar i{display:block;height:100%;width:0;background:var(--rm-gold);transition:width .25s linear}
#rm-out{width:100%;max-height:50vh;border-radius:12px;background:#000;margin:8px 0}
.row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

@media (min-width:860px){
  .rm-body{grid-template-columns:minmax(280px,1fr) minmax(320px,400px);align-items:start}
  .rm-side{border-top:0;border-left:1px solid var(--rm-line);max-height:calc(100dvh - 120px);overflow:auto;padding-bottom:24px}
  .rm-stage{width:min(100%,420px)}
  .rm-stage[data-asp="16:9"]{width:min(100%,100%)}
  .rm-app{min-height:calc(100dvh - 72px)}
}
@media (prefers-reduced-motion:reduce){
  .rm-bar i,.rm-ov-poster{transition:none}
}