/* Clip Studio: same purple, gold and turquoise look as the Podcast Production Studio (V3). */
:root{
  --plum:#7B5C93; --plum-deep:#4A3660; --plum-soft:#EFE7F4; --sun:#F2C230; --gold:#D4AF37;
  --aqua:#2CC4C0; --teal:#1A9A9A; --deepteal:#0F6F6F;
  --paper:#F5EDE2; --card:#FFFFFF; --ink:#1F1A24; --muted:#6B5E70; --line:#E2D6E8; --warnbg:#FFF7DD; --bad:#B23B3B;
  --display:'Playfair Display',Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--paper:#17141B; --card:#221D28; --ink:#F1EAF5; --muted:#B9ABC2; --line:#3B3245; --plum-soft:#2E2536; --warnbg:#3A3320; color-scheme:dark}
}
:root[data-theme="dark"]{--paper:#17141B; --card:#221D28; --ink:#F1EAF5; --muted:#B9ABC2; --line:#3B3245; --plum-soft:#2E2536; --warnbg:#3A3320; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:Montserrat,Arial,sans-serif;font-size:15px;line-height:1.5;min-height:100vh}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.2}
a{color:var(--teal)}
button,input,select,textarea{font:inherit;color:inherit}

.top{background:linear-gradient(120deg,var(--plum-deep),var(--plum));color:#fff;border-bottom:4px solid var(--sun);padding:14px 16px}
.top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.top h1{font-size:28px}
.top h1 a{color:#fff;text-decoration:none}
.crumb{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sun);font-weight:700}
.top-nav{display:flex;gap:12px;align-items:center;font-size:13px}
.top-nav a.ghost{color:#fff;opacity:.85}
.who{opacity:.85}

main{max-width:1180px;margin:0 auto;padding:20px 16px 80px}
.loading{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(40,20,60,.05)}
.card h2{font-size:22px;margin-bottom:6px}
.card h3{font-size:18px;margin-bottom:4px}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--plum);font-weight:800;margin-bottom:4px}
:root[data-theme="dark"] .eyebrow{color:var(--sun)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .eyebrow{color:var(--sun)}}
.note{color:var(--muted);font-size:13px}
.error{color:var(--bad);font-weight:600}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
label.f{display:block;font-weight:700;font-size:13px;margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
textarea{min-height:110px;resize:vertical}
input[type=range]{width:100%;accent-color:var(--plum)}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink);font-size:14px}
.btn:hover{border-color:var(--plum)}
.btn.primary{background:var(--plum);border-color:var(--plum);color:#fff}
.btn.primary:hover{background:var(--plum-deep)}
.btn.gold{background:var(--sun);border-color:var(--sun);color:#2A1F33}
.btn.small{padding:6px 12px;font-size:13px}
.btn.big{padding:13px 24px;font-size:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.hero{background:linear-gradient(135deg,var(--plum-soft),var(--card));border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:16px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.hero h2{font-size:26px}

.plist .pitem{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.plist .pitem:last-child{border-bottom:0}
.pill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--plum-soft);color:var(--plum)}
.pill.ok{background:rgba(44,196,192,.15);color:var(--deepteal)}
.pill.wait{background:var(--warnbg);color:#8A6A00}

.steps{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 4px}
.steps span{flex:1 1 120px;text-align:center;font-size:12px;font-weight:700;padding:8px 6px;border-radius:10px;background:var(--plum-soft);color:var(--muted)}
.steps span.done{background:var(--aqua);color:#08312F}
.steps span.now{background:var(--sun);color:#2A1F33}
.pbar{height:8px;background:var(--plum-soft);border-radius:99px;overflow:hidden;margin-top:10px}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--plum),var(--aqua));transition:width .3s}
.status{font-weight:600}

.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.reel{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.reel .vid{aspect-ratio:9/16;background:#120E16;position:relative}
.reel .vid video,.reel .vid img,.reel .vid canvas{width:100%;height:100%;object-fit:cover;display:block}
.reel .vid .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#d8cde0;font-size:13px;padding:16px}
.reel .body{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.reel .t{font-weight:800}
.reel .hook{font-family:var(--display);font-size:17px}
.reel .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.reel.building{outline:3px solid var(--sun)}

.edit{border-top:1px solid var(--line);padding:12px;background:var(--plum-soft)}
.slots{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.slot{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px}
.slot img,.slot .noimg{width:64px;height:40px;object-fit:cover;border-radius:6px;background:#2a2230;flex:none}
.slot .txt{flex:1;font-size:12px;min-width:0}
.slot .txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.frame-prev{width:100%;max-width:260px;aspect-ratio:9/16;border-radius:12px;background:#120E16;display:block}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.lib div{font-size:12px}
.lib video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#120E16}

.say{font-family:ui-monospace,Consolas,monospace;background:var(--plum-soft);padding:4px 10px;border-radius:8px;font-weight:700}
.warn{background:var(--warnbg);border:1px solid var(--gold);border-radius:10px;padding:10px 12px;font-size:13px}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--plum-deep);color:#fff;padding:10px 18px;border-radius:999px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100% - 32px);text-align:center;z-index:50}
#toast.on{opacity:1}

.login{max-width:420px;margin:30px auto}
.login img{width:100%;border-radius:12px;margin-bottom:12px}

@media (max-width:600px){
  .top h1{font-size:22px}
  .hero h2{font-size:21px}
  .reels{grid-template-columns:1fr 1fr;gap:10px}
  .reel .body{padding:9px}
}
@media (max-width:380px){ .reels{grid-template-columns:1fr} }

/* Caption style picker */
.sp{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.sp-tiles{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;-webkit-overflow-scrolling:touch}
.sp-tile{flex:0 0 104px;scroll-snap-align:start;border:3px solid transparent;border-radius:14px;padding:0 0 6px;background:var(--card);cursor:pointer;display:flex;flex-direction:column;gap:5px;align-items:stretch;box-shadow:0 1px 3px rgba(40,20,60,.12)}
.sp-tile canvas{width:100%;aspect-ratio:9/16;border-radius:11px 11px 0 0;display:block;background:#2a2230}
.sp-tile span{font-size:11.5px;font-weight:800;text-align:center;line-height:1.2;padding:0 4px}
.sp-tile.on{border-color:var(--sun);box-shadow:0 0 0 2px var(--plum)}
.sp-tile:focus-visible,.sw:focus-visible,.seg:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.sp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sp-lab{font-size:12px;font-weight:800;color:var(--muted);min-width:70px}
.sw{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.sw.on{border:3px solid var(--plum);box-shadow:0 0 0 2px var(--sun)}
.seg{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;cursor:pointer}
.seg.on{background:var(--plum);border-color:var(--plum);color:#fff}
.edit .sp-tile{flex-basis:88px}

/* Drag and drop file boxes */
.drop{position:relative;display:flex;gap:14px;align-items:center;border:2px dashed var(--plum);border-radius:14px;padding:22px 18px;background:var(--plum-soft);transition:background .15s,border-color .15s;min-height:96px}
.drop:hover,.drop.over{background:rgba(44,196,192,.14);border-color:var(--aqua)}
.drop.over{border-style:solid}
.drop.has{border-style:solid;border-color:var(--aqua)}
.drop-ic{font-size:30px;line-height:1;width:52px;height:52px;border-radius:50%;background:var(--plum);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.drop b{font-size:16px}
.drop-name{font-weight:700;color:var(--teal);margin-top:4px;word-break:break-all}
.drop-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop:focus-within{outline:3px solid var(--aqua);outline-offset:2px}

/* Reel editor page */
.ed-top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.ed-title{flex:1;min-width:200px}
.ed-title h2{font-size:24px}
.ed-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start;padding-bottom:80px}
.ed-side{position:sticky;top:12px}
.ed-side .reel{border-radius:16px}
.ed-main .card{margin-bottom:14px}
.spots{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.spot{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.spot.open{border-color:var(--plum);box-shadow:0 0 0 2px var(--plum-soft)}
.spot-row{display:flex;gap:12px;align-items:center;padding:8px}
.spot-thumb{position:relative;width:128px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#2a2230;flex:none}
.spot-thumb img,.pv-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#cfc3d8;font-size:11px;font-weight:700}
.spot-txt{flex:1;min-width:0}
.spot-words{font-size:14px;font-style:italic;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.picker{border-top:1px solid var(--line);padding:10px;background:var(--card)}
.picker-search{flex-wrap:nowrap}
.picker-search input{flex:1;min-width:0}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.pk{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:3px solid transparent;padding:0;background:#2a2230;cursor:pointer}
.pk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk:hover,.pk:focus-visible{border-color:var(--aqua);outline:none}
.pk.on{border-color:var(--sun)}
.pk-tag{position:absolute;left:6px;bottom:5px;font-size:10.5px;font-weight:800;color:#fff;background:rgba(20,10,30,.65);padding:2px 7px;border-radius:99px;z-index:2}
.pk-on{position:absolute;right:6px;top:5px;font-size:11px;font-weight:800;color:#2A1F33;background:var(--sun);padding:2px 8px;border-radius:99px;z-index:2}
.pv-vid{z-index:1}
.ed-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--card);border-top:3px solid var(--sun);box-shadow:0 -4px 16px rgba(40,20,60,.12)}
@media (max-width:820px){
  .ed-wrap{grid-template-columns:minmax(0,1fr)}
  .ed-side{position:static;max-width:260px;margin:0 auto}
  .spot-thumb{width:96px}
  .pk-grid{grid-template-columns:repeat(2,1fr)}
  .ed-bar .note{display:none}
}
.ed-prev{width:100%;justify-content:center;margin-top:10px}
.ed-canvas{width:100%;height:100%;display:block;background:#120E16}
.cover-wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-top:8px}
.cover-prev{width:180px;aspect-ratio:9/16;border-radius:12px;background:#2a2230;display:block;flex:none}
.stale{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;color:#fff;background:rgba(30,18,42,.86)}
.stale b{font-size:17px}
.stale span{font-size:13px;opacity:.9}
.stale .btn.gold{font-size:16px;padding:12px 22px;line-height:1.2;flex-direction:column}
.stale .btn.gold small{font-weight:600;font-size:11px;opacity:.8}
.linkish{background:none;border:0;color:#d9cce6;text-decoration:underline;font-size:12px;cursor:pointer;padding:2px}

/* Reel formats */
.lay{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.lay-tile{border:3px solid transparent;border-radius:14px;background:var(--card);box-shadow:0 1px 3px rgba(40,20,60,.12);padding:8px 8px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font:inherit;color:inherit}
.lay-tile b{font-size:12.5px;line-height:1.2}
.lay-tile small{font-size:11px;line-height:1.25;opacity:.75}
.lay-tile.on{border-color:var(--sun);box-shadow:0 0 0 2px var(--plum)}
.lay-ph{position:relative;width:62px;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#2a2230;display:block;margin-bottom:4px}
.lay-ph i{position:absolute;display:block}
.lay-ph .lf{background:linear-gradient(135deg,#3E6E8E,#E39B6B)}
.lay-ph .lm{background:radial-gradient(circle at 50% 38%,#E8C7A8 0 18%,transparent 19%),radial-gradient(ellipse at 50% 100%,#7B5C93 0 45%,transparent 46%),#D8C3A5}
.lay-split .lf{left:0;right:0;top:0;height:50%}
.lay-split .lm{left:0;right:0;bottom:0;height:50%;border-top:2px solid #F2C230}
.lay-bubble .lf{inset:0}
.lay-bubble .lm{width:34%;aspect-ratio:1;right:8%;top:66%;border-radius:50%;border:2px solid #F2C230}
.lay-cutaway .lm{inset:0}
.lay-cutaway .lf{left:0;top:0;width:50%;height:100%;z-index:1;border-right:2px solid #F2C230}
.lay-me .lf{display:none}
.lay-me .lm{inset:0}
.lay-lab{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);margin:10px 0 4px}
.lay.mini{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.lay.mini .lay-tile{padding:5px 3px 6px;border-width:2px;border-radius:10px;gap:2px}
.lay.mini .lay-ph{width:34px;margin-bottom:2px;border-radius:5px}
.lay.mini .lay-tile b{font-size:10px;font-weight:700}
.lay.mini .lay-tile small{display:none}

/* transcript, to make your own Reel */
.tx-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0}
.tx-tools input[type=search]{flex:1;min-width:220px}
.tx-t{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px}
.tx-t input{width:90px}
.tx-box{max-height:440px;overflow-y:auto;border:1px solid rgba(74,54,96,.18);border-radius:12px;background:#FFFDF8;padding:6px}
.tx-line{display:flex;gap:12px;align-items:flex-start;padding:7px 8px;border-radius:8px;cursor:pointer;line-height:1.45;font-size:14.5px}
.tx-line:hover{background:rgba(242,194,48,.14)}
.tx-line.on{background:rgba(44,196,192,.18);box-shadow:inset 3px 0 0 #2CC4C0}
.tx-time{flex:0 0 52px;font-weight:800;color:var(--plum);font-variant-numeric:tabular-nums}
.tx-text{flex:1}
.tx-text mark{background:#F2C230;color:inherit;border-radius:3px;padding:0 2px}
.tx-used{flex:none;font-size:11px;font-weight:800;color:#fff;background:var(--plum);border-radius:999px;padding:2px 8px;margin-top:2px}
.cl-note{font-size:12.5px;line-height:1.4;margin:6px 0 2px;padding:6px 9px;border-radius:9px}
.cl-note.wait{background:rgba(242,194,48,.18)}
.cl-note.ok{background:rgba(44,196,192,.14)}
.cl-note.err{background:rgba(255,122,107,.16)}
.cl-note:not(.wait):not(.ok):not(.err){padding:0}

/* cover me with footage */
.cv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.08); }
.cv-row:first-child { border-top: 0; }
.cv-row input { width: 78px; margin-left: 4px; }
.cv-n { width: 26px; height: 26px; border-radius: 50%; background: var(--sun, #f2b632); color: #2a2230; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.cv-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.cv-add input, .cv-row input { width: 78px; margin-left: 4px; text-align: center; }
.cv-err { color: #b3261e; }
.pv-clock { position: absolute; left: 10px; top: 10px; background: rgba(20,14,26,.78); color: #fff; font: 700 15px Montserrat, sans-serif; padding: 4px 9px; border-radius: 8px; pointer-events: none; letter-spacing: .5px; z-index: 3; }
.pv-clock.on { background: #f2b632; color: #2a2230; }
/* covered moments inside the Top videos list */
.cover-spot { border-left: 4px solid #f2b632; background: rgba(242,182,50,.10); }
.cover-spot .spot-thumb { position: relative; }
.cv-badge { position: absolute; left: 4px; bottom: 4px; background: #f2b632; color: #2a2230; font: 700 10px Montserrat, sans-serif; padding: 2px 6px; border-radius: 6px; }
.cv-times { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; }
.cv-times input { width: 70px; margin-left: 4px; text-align: center; }
.cv-acts { display: flex; flex-direction: column; gap: 6px; }
.cv-add-top { padding: 10px 12px; border-radius: 12px; background: rgba(242,182,50,.12); border: 1px solid rgba(242,182,50,.45); margin: 6px 0 2px; }
/* zoom in on me */
.zm-add { background: rgba(110,60,140,.08); border-color: rgba(110,60,140,.35); }
.zm-auto { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.zoom-spot { border-left: 4px solid #6e3c8c; background: rgba(110,60,140,.07); }
.zm-thumb { display: flex; align-items: center; justify-content: center; font-size: 26px; background: #2a2230; position: relative; }
.zm-badge { background: #6e3c8c; color: #fff; }
/* my clips */
.my-list { margin-top: 8px; }
.my-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border-radius: 12px; background: rgba(110,60,140,.06); border-left: 4px solid #6e3c8c; margin-top: 8px; }
.my-txt { flex: 1; min-width: 200px; }
.segs { display: inline-flex; border: 1px solid rgba(110,60,140,.4); border-radius: 999px; overflow: hidden; }
.seg { border: 0; background: #fff; color: #2a2230; padding: 7px 12px; font: 600 13px Montserrat, sans-serif; cursor: pointer; }
.seg + .seg { border-left: 1px solid rgba(110,60,140,.25); }
.seg.on { background: #6e3c8c; color: #fff; }
.zm-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 4px; }
.se-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; }
.se-row input { width: 78px; margin-left: 6px; text-align: center; }
.se-words { flex-basis: 100%; margin: 0; font-style: italic; }
/* timeline under the preview */
.seek { margin: 10px 0 4px; }
.seek input[type=range] { width: 100%; accent-color: #6e3c8c; height: 22px; cursor: pointer; }
.seek-lab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #6b5f73; }
.seek-lab span:nth-child(2) { text-align: center; }