/* ═══ Showcase · premium calm layer ═══
   Same controls, same ids. Quieter surfaces, hairlines instead of boxes, grouped chips,
   softer motion, one accent. Everything derives from the app theme, so light/dark both work. */
.spp-overlay{
  --sp-ease:cubic-bezier(.2,.7,.2,1);
  --sp-line:color-mix(in srgb,var(--text) 8%,transparent);
  --sp-line2:color-mix(in srgb,var(--text) 15%,transparent);
  --sp-fill:color-mix(in srgb,var(--text) 3.5%,transparent);
  --sp-fill2:color-mix(in srgb,var(--text) 7%,transparent);
  --sp-cyfill:color-mix(in srgb,var(--blue,#00c2ff) 11%,transparent);
  --sp-track:color-mix(in srgb,var(--text) 14%,transparent);
  background:radial-gradient(120% 90% at 50% 0%,rgba(14,20,38,.62),rgba(3,6,14,.80));
  backdrop-filter:blur(18px) saturate(1.05);-webkit-backdrop-filter:blur(18px) saturate(1.05);
  transition:opacity .4s var(--sp-ease),visibility .4s}
[data-theme="light"] .spp-overlay{background:radial-gradient(120% 90% at 50% 0%,rgba(30,38,60,.34),rgba(10,15,30,.50))}
.spp-overlay .spp-modal{border-radius:24px;border:1px solid var(--sp-line2);
  box-shadow:0 1px 0 color-mix(in srgb,#fff 6%,transparent) inset,0 50px 140px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.18);
  transform:translateY(14px) scale(.99);transition:transform .5s var(--sp-ease)}
.spp-overlay.open .spp-modal{transform:none}

/* header */
.spp-overlay .spp-head{padding:16px 24px;border-bottom:1px solid var(--sp-line);gap:14px}
.spp-overlay .spp-head .spp-ico{width:34px;height:34px;border-radius:11px;
  background:linear-gradient(145deg,var(--sp-cyfill),color-mix(in srgb,var(--sp-acc) 4%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sp-acc) 22%,transparent)}
.spp-overlay .spp-head b{font-size:15.5px;font-weight:650;letter-spacing:.01em}
.spp-overlay .spp-head .spp-x{border:none;background:var(--sp-fill);border-radius:50%;width:32px;height:32px;font-size:18px;color:var(--sp-ink2);transition:background .3s,color .3s,transform .3s var(--sp-ease)}
.spp-overlay .spp-head .spp-x:hover{background:var(--sp-fill2);color:var(--sp-ink);transform:rotate(90deg)}

/* stage: calm neutral backdrop instead of a busy checkerboard */
.spp-overlay .spp-body{grid-template-columns:minmax(0,1fr) 352px}
.spp-overlay .spp-stage{padding:22px 24px 20px;gap:16px}
.spp-overlay .spp-canvas-wrap{border-radius:20px;border:1px solid var(--sp-line);
  background:radial-gradient(90% 80% at 50% 38%,color-mix(in srgb,var(--text) 6%,var(--bg2)),color-mix(in srgb,var(--text) 11%,var(--bg2)));
  background-image:none}
.spp-overlay .spp-canvas-wrap canvas{border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.32),0 4px 14px rgba(0,0,0,.14)}
.spp-overlay .spp-cmp{border-radius:20px;border:1px solid var(--sp-line);background:var(--sp-fill)}
.spp-overlay .spp-tag{font-size:9.5px;font-weight:650;letter-spacing:.12em;padding:5px 10px;
  background:color-mix(in srgb,var(--bg2) 82%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--sp-line);color:var(--sp-ink2)}
.spp-overlay .spp-empty{font-weight:500;letter-spacing:.02em;opacity:.75}

/* transport as one quiet pill bar */
.spp-overlay .spp-transport{gap:14px;padding:8px 10px;border:1px solid var(--sp-line);border-radius:999px;background:var(--sp-fill)}
.spp-overlay .spp-transport button{min-width:68px;padding:7px 16px;border:none;background:var(--sp-fill2);font-weight:600;letter-spacing:.02em;transition:background .3s,color .3s}
.spp-overlay .spp-transport button:hover{background:var(--sp-cyfill);color:var(--sp-acc)}
.spp-overlay .spp-transport #sppCmpBtn.on{background:var(--sp-cyfill);color:var(--sp-acc)}

/* sliders and switches: thinner, quieter */
.spp-overlay input[type=range]{height:3px}
.spp-overlay .spp-modal input[type=range]::-webkit-slider-thumb{width:14px;height:14px;border:none;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);transition:box-shadow .25s,transform .25s var(--sp-ease)}
.spp-overlay .spp-modal input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.spp-overlay .spp-modal input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.spp-overlay .spp-modal input[type=checkbox]{box-shadow:none;background:var(--sp-track);transition:background .3s var(--sp-ease)}
.spp-overlay .spp-modal input[type=checkbox]:checked{box-shadow:none}

/* side panel: flat sections divided by hairlines, not stacked boxes */
.spp-overlay .spp-side{background:color-mix(in srgb,var(--text) 2%,var(--bg2));border-left:1px solid var(--sp-line)}
.spp-overlay .spp-scroll{padding:6px 20px 18px;scrollbar-width:thin;scrollbar-color:var(--sp-line2) transparent}
.spp-overlay .spp-scroll::-webkit-scrollbar{width:6px}
.spp-overlay .spp-scroll::-webkit-scrollbar-thumb{background:var(--sp-line2);border-radius:6px}
.spp-overlay .spp-scroll>.spp-grp{background:none;border:none;border-radius:0;border-bottom:1px solid var(--sp-line);margin:0}
.spp-overlay .spp-scroll>.spp-grp:last-child{border-bottom:none}
.spp-overlay .spp-grp[open]{border-color:var(--sp-line)}
.spp-overlay .spp-scroll>.spp-grp>summary{padding:16px 2px;font-size:12px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--sp-ink2);transition:color .3s}
.spp-overlay .spp-scroll>.spp-grp[open]>summary{color:var(--sp-ink);border-bottom:none}
.spp-overlay .spp-scroll>.spp-grp>summary:hover{color:var(--sp-ink)}
.spp-overlay .spp-scroll>.spp-grp>summary>i{width:22px;font-size:10px;letter-spacing:.06em;color:var(--sp-acc);opacity:.85}
.spp-overlay .spp-grp>summary::after{opacity:.45;transition:transform .35s var(--sp-ease),opacity .3s}
.spp-overlay .spp-grp>summary:hover::after{opacity:.8}
.spp-overlay .spp-scroll>.spp-grp>.spp-in{padding:2px 2px 18px}
.spp-overlay .spp-in{animation:sppIn .35s var(--sp-ease)}
.spp-overlay .spp-grp .spp-grp{border-top:1px solid var(--sp-line);margin:10px 0 0}
.spp-overlay .spp-grp .spp-grp>summary{padding:12px 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:none;opacity:.8}
.spp-overlay .spp-row{margin:13px 0;font-size:12.5px}
.spp-overlay .spp-row label{color:var(--sp-ink2);font-weight:500}
.spp-overlay .spp-row .spp-val{font-weight:600;font-size:11px;color:var(--sp-ink2);width:32px}

/* category labels + chip grids (the big motion walls) */
.spp-overlay .spp-seg.spp-chips{display:grid;gap:6px;background:none;border:none;padding:0;border-radius:0}
.spp-overlay .spp-seg.spp-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.spp-overlay .spp-seg.spp-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.spp-overlay .spp-cat{grid-column:1/-1;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-ink2);opacity:.65;margin:14px 0 2px;display:flex;align-items:center;gap:10px}
.spp-overlay .spp-cat:first-child{margin-top:4px}
.spp-overlay .spp-cat::after{content:"";flex:1;height:1px;background:var(--sp-line)}
.spp-overlay .spp-chips button,#sppMotionSeg button,#sppFMotionSeg button{padding:8px 6px;font-size:11.5px;font-weight:550;text-align:center;border-radius:10px;
  background:var(--sp-fill);border:1px solid transparent;color:var(--sp-ink2);overflow:hidden;text-overflow:ellipsis;
  transition:background .3s var(--sp-ease),color .3s,border-color .3s,transform .3s var(--sp-ease)}
.spp-overlay .spp-chips button:hover{background:var(--sp-fill2);color:var(--sp-ink);border-color:var(--sp-line);transform:translateY(-1px)}
.spp-overlay .spp-chips button.on{background:var(--sp-cyfill);border-color:color-mix(in srgb,var(--sp-acc) 55%,transparent);color:var(--sp-acc);font-weight:650}

/* small segmented controls (format, direction, background, align) */
.spp-overlay .spp-seg:not(.spp-chips){background:var(--sp-fill);border:1px solid var(--sp-line);padding:3px;border-radius:12px;gap:2px}
.spp-overlay .spp-seg:not(.spp-chips) button{border:none;border-radius:9px;padding:7px 10px;font-weight:550;transition:background .3s var(--sp-ease),color .3s,box-shadow .3s}
.spp-overlay .spp-seg:not(.spp-chips) button:hover{border:none;background:var(--sp-fill2);color:var(--sp-ink)}
.spp-overlay .spp-seg:not(.spp-chips) button.on{background:var(--bg2);color:var(--sp-acc);box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 1px var(--sp-line)}

/* motion finder */
.spp-overlay .spp-find{margin:0 0 4px}
.spp-overlay .spp-side .spp-find input[type=text]{margin:0;border-radius:11px;background:var(--sp-fill);border:1px solid var(--sp-line);padding:9px 12px 9px 34px;font-size:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px 50%}

/* inputs, selects */
.spp-overlay .spp-side input[type=text],.spp-overlay .spp-side select{border:1px solid var(--sp-line2);border-radius:11px;background-color:var(--bg2);padding:10px 12px}
.spp-overlay .spp-side input[type=text]{margin:0 0 8px}
.spp-overlay .spp-side input:hover,.spp-overlay .spp-side select:hover{border-color:var(--sp-line2);background-color:color-mix(in srgb,var(--text) 2%,var(--bg2))}
.spp-overlay .spp-side input:focus,.spp-overlay .spp-side select:focus{border-color:color-mix(in srgb,var(--sp-cy) 70%,transparent);box-shadow:0 0 0 4px var(--sp-cyfill)}
.spp-overlay .spp-side input[type=color]{border:1px solid var(--sp-line2);border-radius:9px;width:36px;height:28px}

/* upload, reels, thumbs */
.spp-overlay .spp-drop{border:1px dashed color-mix(in srgb,var(--sp-cy) 55%,transparent);border-radius:16px;padding:22px 14px;background:var(--sp-cyfill);color:var(--sp-ink2);font-weight:500;transition:background .3s,border-color .3s,transform .3s var(--sp-ease)}
.spp-overlay .spp-drop:hover,.spp-overlay .spp-drop.over{background:color-mix(in srgb,var(--blue,#00c2ff) 18%,transparent);border-color:var(--sp-cy)}
.spp-overlay .spp-link{border:1px solid var(--sp-line2);border-radius:11px;background:transparent;color:var(--sp-ink2);font-weight:550;transition:background .3s,color .3s,border-color .3s}
.spp-overlay .spp-link:hover{background:var(--sp-fill2);color:var(--sp-ink);border-color:var(--sp-line2)}
.spp-overlay .spp-reels{gap:8px}
.spp-overlay .spp-reel{border:1px solid var(--sp-line);border-radius:13px;background:var(--sp-fill);padding:11px 12px;transition:background .3s var(--sp-ease),border-color .3s,transform .3s var(--sp-ease)}
.spp-overlay .spp-reel:hover{background:var(--sp-fill2);border-color:var(--sp-line2);transform:translateY(-1px)}
.spp-overlay .spp-reel.on{background:var(--sp-cyfill);border-color:color-mix(in srgb,var(--sp-acc) 55%,transparent)}
.spp-overlay .spp-reel b{font-weight:650}
.spp-overlay .spp-reel small{opacity:.8}
.spp-overlay .spp-th{border-radius:10px;border:1px solid var(--sp-line)}
.spp-overlay .spp-swatches{gap:10px}
.spp-overlay .spp-swatches i{width:24px;height:24px;border:1px solid var(--sp-line2);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.spp-overlay .spp-note{font-size:11.5px;line-height:1.55;color:var(--sp-ink2)}
.spp-overlay .spp-note.warn{color:var(--sp-ink2)}

/* footer actions */
.spp-overlay .spp-foot{padding:16px 20px 18px;border-top:1px solid var(--sp-line);background:var(--bg2)}
.spp-overlay .spp-btn{border:1px solid var(--sp-line2);border-radius:12px;font-weight:600;letter-spacing:.01em;background:transparent;transition:background .3s var(--sp-ease),border-color .3s,transform .25s var(--sp-ease),box-shadow .3s}
.spp-overlay .spp-btn:hover{background:var(--sp-fill2);border-color:var(--sp-line2)}
.spp-overlay .spp-btn.primary{border:none;padding:12px;font-size:13px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue,#00c2ff) 100%,#fff 10%),var(--blue,#00c2ff));
  box-shadow:0 8px 22px color-mix(in srgb,var(--blue,#00c2ff) 26%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.spp-overlay .spp-btn.primary:hover{filter:none;transform:translateY(-1px);box-shadow:0 12px 28px color-mix(in srgb,var(--blue,#00c2ff) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.spp-overlay .spp-prog div{height:3px}

/* keyboard focus stays visible, but gentle */
.spp-overlay :focus-visible{outline:2px solid color-mix(in srgb,var(--sp-cy) 70%,transparent);outline-offset:2px}

@media (max-width:860px){.spp-overlay .spp-body{grid-template-columns:1fr}.spp-overlay .spp-stage{padding:16px}.spp-overlay .spp-side{border-left:none;border-top:1px solid var(--sp-line)}}
@media (prefers-reduced-motion:reduce){.spp-overlay *,.spp-overlay{transition:none!important;animation:none!important}}