/* Process "Choose the moment" (js/process-trim.js, 2026-10-14): a timeline under the showcase preview for a GIF or
   video. Prefix ptrim-. layout-refinement.css forces the button radius through --sm-action-radius, so it is set here. */
#processTrimPanel[hidden]{display:none!important}
.ptrim{--ptrim-cyan:#1fc9f1;--ptrim-violet:#8a7dff;--ptrim-muted:rgba(214,229,250,.66);
  display:grid;gap:12px;margin-top:14px;padding:14px 16px 16px;border:1px solid rgba(110,170,255,.2);border-radius:16px;
  background:linear-gradient(160deg,rgba(14,26,60,.82),rgba(5,10,28,.92));font-family:Montserrat,system-ui,sans-serif;color:#e9f3ff}
.ptrim__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.ptrim__id{display:grid;gap:2px;min-width:0}
.ptrim__kicker{color:var(--ptrim-cyan);font-size:12px;font-weight:700;letter-spacing:.02em}
.ptrim__sum{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ptrim__actions{display:flex;flex-wrap:wrap;gap:8px}
#tab-process .ptrim button{--sm-action-radius:999px;font-family:inherit}
#tab-process .ptrim .ptrim__btn{min-height:34px;padding:0 14px;border:1px solid rgba(110,170,255,.28);border-radius:999px;background:rgba(255,255,255,.04);
  color:#e9f3ff;font-size:13px;font-weight:700;cursor:pointer}
#tab-process .ptrim .ptrim__btn:hover:not(:disabled){border-color:var(--ptrim-cyan)}
#tab-process .ptrim .ptrim__btn:disabled{opacity:.45;cursor:default}
#tab-process .ptrim .ptrim__btn--play{border-color:transparent;background:linear-gradient(135deg,var(--ptrim-cyan),var(--ptrim-violet));color:#04101e}
#tab-process .ptrim .ptrim__btn--play[aria-pressed="true"]{background:rgba(31,201,241,.16);color:#e9f3ff;border-color:var(--ptrim-cyan)}

.ptrim__track{position:relative;height:58px;border-radius:10px;overflow:hidden;background:#0b1220;touch-action:none;cursor:pointer;user-select:none}
.ptrim__strip{position:absolute;inset:0;width:100%;height:100%;display:block}
.ptrim__shade{position:absolute;top:0;bottom:0;background:rgba(3,7,18,.68);pointer-events:none}
.ptrim__win{position:absolute;top:0;bottom:0;box-sizing:border-box;border:2px solid var(--ptrim-cyan);border-radius:10px;
  box-shadow:0 0 0 1px rgba(3,7,18,.6),0 0 18px rgba(31,201,241,.35);cursor:grab;outline:none}
.ptrim__win:active{cursor:grabbing}
.ptrim__win:focus-visible,.ptrim__handle:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.ptrim__handle{position:absolute;top:-2px;bottom:-2px;width:16px;background:var(--ptrim-cyan);cursor:ew-resize;outline:none}
.ptrim__handle::after{content:"";position:absolute;top:50%;left:50%;width:3px;height:18px;margin:-9px 0 0 -1.5px;border-radius:2px;background:rgba(4,16,30,.75)}
.ptrim__handle--l{left:-2px;border-radius:9px 0 0 9px}
.ptrim__handle--r{right:-2px;border-radius:0 9px 9px 0}
.ptrim__playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);pointer-events:none;display:none}

.ptrim__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ptrim__lenlabel{color:var(--ptrim-muted);font-size:12.5px;font-weight:600}
.ptrim__chips{display:flex;flex-wrap:wrap;gap:6px}
#tab-process .ptrim .ptrim__chip{min-height:30px;min-width:52px;padding:0 12px;border:1px solid rgba(110,170,255,.24);border-radius:999px;background:transparent;
  color:#cfe0f7;font-size:12.5px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
#tab-process .ptrim .ptrim__chip.is-on{border-color:var(--ptrim-cyan);background:rgba(31,201,241,.14);color:#fff}
#tab-process .ptrim .ptrim__chip:disabled{opacity:.4;cursor:default}
#tab-process .ptrim .ptrim__chip[hidden]{display:none!important}
.ptrim__hint{margin:0;color:var(--ptrim-muted);font-size:12.5px;line-height:1.45}
.ptrim-tag{color:#8eeaff;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .ptrim{padding:12px}
  .ptrim__track{height:50px}
  .ptrim__handle{width:20px}
  .ptrim__actions{width:100%}
  #tab-process .ptrim .ptrim__btn{flex:1}
}