/* ============================================================
   EZ Video Build Studio — premium dark curiosity-studio design system
   ============================================================ */
:root{
  --bg0:#070708;
  --bg1:#0c0c0f;
  --surface:#141419;
  --surface-2:#1a1a21;
  --surface-3:#22222c;
  --hair:rgba(255,255,255,.075);
  --hair-strong:rgba(255,255,255,.13);
  --text:#f5f5f7;
  --muted:#a3a3af;
  --faint:#6e6e7a;
  --red:#4b2ea6;
  --red-hi:#6a48d7;
  --red-deep:#2a1666;
  --blue:#4d8dff;
  --amber:#e8a90c;
  --green:#35c77a;
  --r-card:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --hdr-h:104px;
  --shadow-card:0 10px 28px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.35);
  --shadow-pop:0 18px 50px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(120% 340px at 50% -60px, rgba(106,72,215,.16), rgba(106,72,215,0) 70%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 320px);
  background-color:var(--bg0);
  color:var(--text);
  font-family:"Noto Sans Myanmar","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
  min-height:100dvh;
}
button{font-family:inherit}
svg{display:block}
.icon-btn svg,.state-ico{width:20px;height:20px}

/* ---------- logo tile ---------- */
.m-tile{
  background:linear-gradient(145deg, var(--red-hi), var(--red) 55%, var(--red-deep));
  color:#fff; font-family:"Inter",sans-serif; font-weight:900; font-style:italic;
  width:40px; height:40px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:23px; line-height:1; border-radius:9px;
  transform:skewX(-7deg);
  box-shadow:0 4px 16px rgba(232,54,45,.4), inset 0 1px 0 rgba(255,255,255,.28);
}
.m-tile-lg{width:64px;height:64px;font-size:37px;border-radius:13px}

/* ============ Gate ============ */
.gate{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:28px 22px calc(28px + env(safe-area-inset-bottom));
}
.gate-inner{width:100%; max-width:360px; text-align:center; animation:rise .7s var(--ease) both}
.gate-logo{display:flex; justify-content:center; margin-bottom:20px}
.gate-title{font-family:"Inter",sans-serif; font-weight:900; letter-spacing:.1em; font-size:27px; margin:0}
.gate-sub{font-family:"Inter",sans-serif; letter-spacing:.42em; font-size:11px; color:var(--muted); margin:5px 0 0; text-indent:.42em}
.gate-form{margin-top:38px; text-align:left}
.gate-label{display:block; font-size:14px; color:var(--muted); margin:0 2px 9px}
.gate-form input{
  width:100%; background:var(--surface); color:var(--text);
  border:1px solid var(--hair-strong); border-radius:13px;
  padding:15px 16px; font-size:17px; letter-spacing:.14em; text-align:center;
  outline:none; transition:border-color .25s, box-shadow .25s;
  -webkit-appearance:none; appearance:none;
}
.gate-form input:focus{border-color:var(--red); box-shadow:0 0 0 4px rgba(106,72,215,.20)}
.gate-error{color:#ff7a70; font-size:13.5px; margin:11px 2px 0; animation:shake .4s var(--ease)}
.gate-btn{margin-top:16px}
.gate-foot{color:var(--faint); font-size:13px; margin-top:34px}

/* ============ App shell / header ============ */
.app{animation:fadein .45s var(--ease) both}
.hdr{
  position:sticky; top:0; z-index:40;
  /* Near-opaque solid — NO backdrop-filter: blurring scrolling content
     behind sticky bars is a classic iOS WebKit crash/jank multiplier. */
  background:linear-gradient(180deg, rgba(13,13,16,.985), rgba(9,9,11,.97));
  border-bottom:1px solid var(--hair);
}
.hdr-row{
  max-width:780px; margin:0 auto; padding:12px 16px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:11px; min-width:0}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-family:"Inter",sans-serif; font-weight:900; letter-spacing:.07em; font-size:18.5px}
.brand-sub{font-family:"Inter",sans-serif; font-size:9.5px; letter-spacing:.34em; color:var(--muted)}
.hdr-actions{display:flex; gap:8px}
.icon-btn{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--muted);
  border:1px solid var(--hair); cursor:pointer;
  transition:color .2s, background .2s, transform .12s var(--ease);
}
.icon-btn:active{transform:scale(.92); color:var(--text)}
.icon-btn.spin svg{animation:rot .7s var(--ease)}
.hdr-date{
  max-width:780px; margin:0 auto; padding:4px 18px 12px;
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--faint); line-height:1.85;
}
.live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--red); flex:0 0 auto;
  animation:pulse-opacity 2.4s ease-in-out infinite;
}

/* ---------- tabs ---------- */
.tabs{
  position:sticky; top:var(--hdr-h); z-index:39;
  background:linear-gradient(180deg, rgba(11,11,13,.985), rgba(9,9,11,.97));
  border-bottom:1px solid var(--hair);
}
.tab-track{
  position:relative; max-width:780px; margin:9px auto; padding:0 4px;
  width:calc(100% - 24px);
  display:grid; grid-template-columns:38% 28% 34%;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:13px;
}
.tab{
  position:relative; z-index:1; border:0; background:transparent; cursor:pointer;
  color:var(--muted); font-size:12.5px; font-weight:600;
  padding:10px 2px; display:flex; align-items:center; justify-content:center; gap:5px;
  transition:color .3s var(--ease); white-space:nowrap;
}
.tab svg{width:15px; height:15px; flex:0 0 auto}
.tab.is-active{color:#fff}
.tab-ind{
  position:absolute; z-index:0; top:4px; bottom:4px; left:6px;
  width:calc(38% - 11px); border-radius:10px;
  background:linear-gradient(160deg, var(--surface-3), #26262f);
  border:1px solid var(--hair-strong);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  transition:left .45s var(--ease), width .45s var(--ease);
}
.tab-ind.mid{left:calc(38% + 3px); width:calc(28% - 7px)}
.tab-ind.right{left:calc(66% + 3px); width:calc(34% - 10px)}
.tab-badge{
  background:var(--red); color:#fff; font-family:"Inter",sans-serif;
  font-size:10px; font-weight:800; min-width:17px; height:17px; flex:0 0 auto;
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ---------- settings ---------- */
.set-card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hair); border-radius:var(--r-card);
  padding:16px 14px; margin-bottom:14px; box-shadow:var(--shadow-card);
}
.set-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.set-title{margin:0 0 10px; font-size:15.5px; font-weight:700}
.set-head .set-title{margin:0}
.set-note{margin:0 0 10px; font-size:12.5px; color:var(--muted); line-height:1.7}
.set-label{display:block; font-size:13px; color:var(--muted); margin:14px 2px 7px}
.set-select,.set-input{
  width:100%; background:var(--surface-2); color:var(--text);
  border:1px solid var(--hair-strong); border-radius:10px;
  padding:11px 12px; font-size:15px; font-family:inherit;
  -webkit-appearance:none; appearance:none;
}
.set-select:focus,.set-input:focus{border-color:var(--amber); outline:none}
.set-row{display:flex; gap:8px}
.set-row .set-input{flex:1; min-width:0}
.btn-mini{
  border:1px solid var(--hair-strong); background:var(--surface-3); color:var(--text);
  border-radius:10px; padding:9px 13px; font-size:13.5px; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:transform .12s var(--ease);
}
.btn-mini:active{transform:scale(.96)}
.btn-mini:disabled{opacity:.45; cursor:default}
.btn-mini-primary{background:var(--red); border-color:var(--red)}
.btn-mini-danger{color:#ff8f86}
.seg{display:flex; gap:6px}
.seg button{
  flex:1; border:1px solid var(--hair-strong); background:var(--surface-2);
  color:var(--muted); border-radius:10px; padding:10px 4px;
  font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit;
}
.seg button.is-active{background:var(--red); border-color:var(--red); color:#fff}
.seg button:disabled{opacity:.5; cursor:default}
.seg .soon{display:block; font-size:10.5px; font-weight:600; color:var(--amber)}
.tgl-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 2px; border-bottom:1px solid var(--hair);
}
.tgl-row:last-child{border-bottom:0}
.tgl-name{font-size:14.5px; font-weight:600}
.tgl-sub{display:block; font-size:12px; color:var(--faint); font-weight:400}
.switch{position:relative; flex:0 0 auto; width:50px; height:30px; cursor:pointer}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.sw-track{
  position:absolute; inset:0; border-radius:999px; background:var(--surface-3);
  border:1px solid var(--hair-strong); transition:background .25s var(--ease);
  pointer-events:none;
}
.sw-track::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:#8a8a96; transition:left .25s var(--ease), background .25s;
}
.switch input:checked + .sw-track{background:var(--red); border-color:var(--red)}
.switch input:checked + .sw-track::after{left:23px; background:#fff}
.health-list{display:flex; flex-direction:column}
.health-row{
  display:flex; align-items:center; gap:9px; padding:9px 2px;
  border-bottom:1px solid var(--hair); font-size:13.5px;
}
.health-row:last-child{border-bottom:0}
.health-row .h-label{color:var(--muted); flex:0 0 42%}
.health-row .h-val{font-weight:600; min-width:0}
.dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.dot-ok{background:var(--green)}
.dot-bad{background:#ff5a4e}
.dot-off{background:#5a5a66}
.key-row{padding:11px 2px; border-bottom:1px solid var(--hair)}
.key-row:last-child{border-bottom:0}
.key-main{display:flex; align-items:center; gap:9px}
.key-name{font-weight:700; font-size:14px; flex:0 0 auto}
.key-masked{font-family:"Inter",sans-serif; color:var(--muted); font-size:13.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.key-test-msg{font-size:12px; margin-left:auto; text-align:right}
.key-actions{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.key-edit{display:flex; gap:8px; margin-top:9px}
.key-edit .set-input{flex:1; min-width:0}
.plat-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 2px; border-bottom:1px solid var(--hair);
}
.plat-row:last-child{border-bottom:0}
.plat-text{min-width:0}
.plat-name{font-size:14.5px; font-weight:600; display:block}
.plat-sub{font-size:12px; color:var(--faint); display:block}

/* ---------- layout ---------- */
.main{max-width:780px; margin:0 auto; padding:16px 14px calc(34px + env(safe-area-inset-bottom))}
.panel{animation:panel-in .5s var(--ease) both}
.cards{display:flex; flex-direction:column; gap:14px}
#postsSentinel{height:2px}
.posts-more{margin-top:14px}

/* ---------- story cards ---------- */
.card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hair); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow-card);
}
.card.enter{animation:card-in .55s var(--ease) both; animation-delay:calc(var(--i, 0) * 42ms)}
.card-media{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover; display:block}
.card-media .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,0) 34%, rgba(0,0,0,0) 62%, rgba(0,0,0,.44));
}
.card-media .noimg{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 130% at 20% 0%, #26262f, #121216); color:var(--faint);
}
.card-media .noimg svg{width:40px; height:40px}
.chip-cat{
  position:absolute; top:11px; left:11px; z-index:2;
  background:var(--red); color:#fff; font-size:12px; font-weight:700;
  padding:4px 11px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.45);
}
.chip-vid{
  position:absolute; top:11px; right:11px; z-index:2;
  background:rgba(8,8,10,.82); color:#fff; font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
  display:inline-flex; align-items:center; gap:5px;
}
.chip-vid svg{width:12px; height:12px}
.card-body{padding:13px 15px 15px}
.card-title{
  font-weight:700; font-size:16.5px; line-height:1.62; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.meta-row{
  display:flex; align-items:center; gap:6px; margin-top:8px;
  color:var(--faint); font-size:12.5px;
}
.meta-row svg{width:13.5px; height:13.5px}
.meta-dot{width:3px; height:3px; border-radius:50%; background:var(--faint); flex:0 0 auto}
.when-badge{
  background:linear-gradient(160deg, #f2b93c, var(--amber)); color:#241a02;
  font-size:11px; font-weight:800; padding:1.5px 8px; border-radius:999px;
  flex:0 0 auto;
}
.when-old{color:var(--faint); flex:0 0 auto}
.card-action{margin-top:13px}

/* ---------- build button ---------- */
.btn-build{
  width:100%; border:0; cursor:pointer; color:#fff;
  background:linear-gradient(160deg, var(--red-hi), var(--red) 58%, var(--red-deep));
  border-radius:13px; padding:14px 16px;
  font-size:15.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 8px 22px rgba(232,54,45,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .13s var(--ease), box-shadow .25s, opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn-build svg{width:20px; height:20px}
.btn-build:active{transform:scale(.975)}
.btn-build[disabled]{opacity:.65; pointer-events:none}
.btn-ghost-act{
  width:100%; border:1px solid var(--hair-strong); cursor:pointer; color:var(--text);
  background:var(--surface-3); border-radius:13px; padding:13px 16px;
  font-size:15px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .13s var(--ease);
}
.btn-ghost-act svg{width:19px; height:19px}
.btn-ghost-act:active{transform:scale(.975)}

/* ---------- status pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px;
  border:1px solid var(--hair); background:var(--surface-3); color:var(--muted);
}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--faint); flex:0 0 auto}
.pill-building{color:#ffc95e; border-color:rgba(245,166,35,.38); background:rgba(245,166,35,.1)}
.pill-building .dot{background:var(--amber); animation:pulse-opacity 1.3s ease-in-out infinite}
.pill-done{color:#5fd99a; border-color:rgba(53,199,122,.36); background:rgba(53,199,122,.09)}
.pill-done .dot{background:var(--green)}
.pill-error{color:#ff8a80; border-color:rgba(232,54,45,.45); background:rgba(232,54,45,.08)}
.pill-error .dot{background:var(--red-hi)}
.status-line{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}

/* ---------- progress ---------- */
.prog{margin-top:12px}
.prog-bar{height:5px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; position:relative}
.prog-fill{
  height:100%; border-radius:99px; width:0%;
  background:linear-gradient(90deg, var(--red), var(--amber));
  transition:width .8s var(--ease); position:relative; overflow:hidden;
}
.prog-label{font-size:12.5px; color:#ffc95e; margin-top:7px; font-weight:600}
.steps{display:flex; gap:5px; margin-top:12px}
.step{flex:1; text-align:center; font-size:11px; color:var(--faint); padding-top:8px; position:relative; line-height:1.35}
.step::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:99px; background:rgba(255,255,255,.1)}
.step.on{color:var(--text)}
.step.on::before{background:var(--amber)}
.step.done{color:var(--muted)}
.step.done::before{background:var(--green)}
.error-box{
  margin-top:11px; font-size:13px; color:#ff9d94; line-height:1.55;
  background:rgba(232,54,45,.07); border:1px solid rgba(232,54,45,.25);
  border-radius:11px; padding:10px 12px; word-break:break-word;
}
.card-actions-row{display:flex; gap:9px; margin-top:12px}
.card-actions-row .btn-build, .card-actions-row .btn-ghost-act{flex:1}

/* ---------- skeletons ---------- */
.skel{
  height:308px; border-radius:var(--r-card); border:1px solid var(--hair);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  animation:skel-pulse 1.4s ease-in-out infinite; /* opacity only — compositor-cheap */
}

/* ---------- state / empty ---------- */
.state-card{
  border:1px dashed var(--hair-strong); border-radius:var(--r-card);
  padding:26px 20px; text-align:center; color:var(--muted); font-size:14.5px;
  background:rgba(255,255,255,.015); margin:0;
}
.state-empty{display:flex; flex-direction:column; align-items:center; gap:4px}
.state-ico{width:38px; height:38px; color:var(--faint); margin-bottom:8px}
.state-title{font-size:16px; font-weight:700; color:var(--text); margin:0}
.state-sub{font-size:13.5px; color:var(--muted); margin:2px 0 0; line-height:1.6}

/* ---------- quota strip ---------- */
.quota{
  border:1px solid var(--hair); border-radius:var(--r-card);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:var(--shadow-card);
  padding:13px 15px 11px; margin-bottom:14px;
}
.quota-top{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:14px; color:var(--muted)}
.quota-top b{color:var(--text); font-weight:800}
.quota-dot{width:3px; height:3px; border-radius:50%; background:var(--faint); flex:0 0 auto}
.quota-bar{height:5px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin-top:10px}
.quota-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--blue), var(--green));
  transition:width .8s var(--ease);
}
.quota-note{font-size:11.5px; color:var(--faint); margin:8px 0 0; line-height:1.65}

/* ---------- story filter chips ---------- */
.filter-row{
  display:flex; gap:8px; margin-bottom:14px; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  margin-left:-2px; margin-right:-2px; padding:2px 2px 4px;
}
.filter-row::-webkit-scrollbar{display:none}
.fchip{
  border:1px solid var(--hair); background:var(--surface-2); color:var(--muted);
  font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; white-space:nowrap;
  transition:color .25s var(--ease), background .25s, border-color .25s, transform .12s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.fchip:active{transform:scale(.96)}
.fchip.is-active{color:#fff; background:var(--surface-3); border-color:var(--hair-strong)}
.fchip-imp.is-active{border-color:rgba(232,54,45,.55); background:rgba(232,54,45,.13); color:#ffb3ac}
.fchip-count{
  background:var(--red); color:#fff; font-size:10.5px; font-weight:800;
  min-width:17px; height:17px; border-radius:999px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
}
/* Topic chips: a horizontally scrolling extension of the same row. */
.topic-chips{display:flex; gap:8px; flex:0 0 auto}
.fchip-topic.is-active{border-color:rgba(77,141,255,.55); background:rgba(77,141,255,.13); color:#bcd7ff}
.fchip-count.tcount{background:rgba(255,255,255,.1); color:var(--muted)}
.fchip-topic.is-active .tcount{background:rgba(77,141,255,.35); color:#dceaff}
.imp-dot{
  width:7px; height:7px; border-radius:50%; background:var(--red-hi); flex:0 0 auto;
  animation:pulse-opacity 2s ease-in-out infinite; /* opacity only — compositor-cheap */
}

/* ---------- importance badge / reasons ---------- */
.chip-imp{
  position:absolute; left:11px; bottom:11px; z-index:2;
  background:linear-gradient(160deg, var(--red-hi), var(--red) 60%, var(--red-deep));
  color:#fff; font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.45);
  display:inline-flex; align-items:center; gap:6px;
}
.chip-imp .imp-dot{background:#fff}
.imp-reasons{
  display:flex; align-items:flex-start; gap:6px; margin-top:8px;
  color:#ff9d94; font-size:12.5px; line-height:1.6;
}
.imp-reasons svg{width:13.5px; height:13.5px; flex:0 0 auto; margin-top:3px}

/* ---------- videos grid ---------- */
.jobs-active{margin-bottom:14px}
.jobs-grid{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.vcard{
  position:relative; border-radius:var(--r-card); overflow:hidden; cursor:pointer;
  border:1px solid var(--hair); background:#000; aspect-ratio:9/15.2;
  box-shadow:var(--shadow-card);
  transition:transform .15s var(--ease);
}
.vcard:active{transform:scale(.98)}
.vcard.enter{animation:card-in .55s var(--ease) both; animation-delay:calc(var(--i, 0) * 42ms)}
.vcard img.poster{width:100%; height:100%; object-fit:cover; display:block}
.vcard .vscrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0) 30%, rgba(0,0,0,.42) 52%, rgba(0,0,0,.78) 74%, rgba(0,0,0,.94));
}
.vcard .vplay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-58%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(10,10,12,.72); border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.vcard .vplay svg{width:19px; height:19px; margin-left:2px}
.vcard .vmeta{position:absolute; left:11px; right:11px; bottom:10px; z-index:2}
.vcard .vtitle{
  font-size:13px; font-weight:600; line-height:1.55; margin:0;
  text-shadow:0 1px 8px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vcard .vsub{display:flex; align-items:center; gap:6px; margin-top:5px}
.dur-badge{
  position:absolute; top:9px; right:9px; z-index:2;
  background:rgba(8,8,10,.68); color:#fff; font-family:"Inter",sans-serif;
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:7px;
  border:1px solid rgba(255,255,255,.16);
}
.done-tag{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:#5fd99a}
.done-tag svg{width:11px; height:11px}
.vdate{font-size:10.5px; color:rgba(255,255,255,.62)}

/* ---------- player ---------- */
.player{position:fixed; inset:0; z-index:80}
.player-backdrop{position:absolute; inset:0; background:rgba(4,4,5,.86); animation:fadein .3s var(--ease) both}
.player-sheet{
  position:absolute; left:0; right:0; bottom:0; max-width:780px; margin:0 auto;
  background:linear-gradient(180deg, #1b1b22, #101014);
  border:1px solid var(--hair-strong); border-bottom:0;
  border-radius:22px 22px 0 0; box-shadow:var(--shadow-pop);
  padding:12px 16px calc(18px + env(safe-area-inset-bottom));
  animation:sheet-in .48s var(--ease) both;
  max-height:94dvh; overflow-y:auto;
}
.player-head{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.player-head .icon-btn{background:var(--surface-3)}
.player-title{
  font-size:14.5px; font-weight:700; line-height:1.72; margin:0; padding-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#playerVideo{
  width:min(100%, calc(62dvh * 9 / 16)); margin:0 auto;
  display:block; background:#000; border-radius:14px;
  aspect-ratio:9/16; object-fit:contain;
}
.player-actions{display:flex; gap:9px; margin-top:13px}
.btn-dl{
  flex:1.4; text-decoration:none; color:#fff; text-align:center;
  background:linear-gradient(160deg, var(--red-hi), var(--red) 58%, var(--red-deep));
  border-radius:12px; padding:13px 10px; font-size:14.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 8px 20px rgba(232,54,45,.25);
  transition:transform .13s var(--ease);
}
.btn-dl svg{width:18px; height:18px}
.btn-dl:active{transform:scale(.97)}
.btn-rebuild{
  flex:1; border:1px solid var(--hair-strong); background:var(--surface-3); color:var(--text);
  border-radius:12px; padding:13px 10px; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:transform .13s var(--ease);
}
.btn-rebuild:active{transform:scale(.97)}
.btn-rebuild[disabled]{opacity:.55}

/* ---------- post panel (per-platform posting) ---------- */
.post-panel{margin-top:15px; border-top:1px solid var(--hair); padding-top:13px}
.post-panel-title{font-size:13px; font-weight:700; color:var(--muted); margin:0 0 4px}
.post-row{padding:8px 0; border-bottom:1px solid var(--hair)}
.post-row:last-child{border-bottom:0; padding-bottom:2px}
.post-row-top{display:flex; align-items:center; gap:9px}
.post-name{font-size:14.5px; font-weight:700; min-width:72px; flex:0 0 auto}
.post-chip{
  display:inline-flex; align-items:center; gap:6px; flex:1; min-width:0;
  font-size:12px; font-weight:600; color:var(--muted);
}
.post-chip.is-done{color:#5fd99a}
.post-chip.is-error{color:#ff8a80}
.post-chip.is-busy{color:#ffc95e}
.post-btn{
  border:1px solid var(--hair-strong); background:var(--surface-3); color:var(--text);
  border-radius:10px; padding:9px 16px; font-size:13.5px; font-weight:700; cursor:pointer;
  flex:0 0 auto; transition:transform .13s var(--ease);
}
.post-btn:active{transform:scale(.96)}
.post-btn[disabled]{opacity:.55}
.post-err{font-size:12px; color:#ff9d94; margin:6px 0 0; line-height:1.65; word-break:break-word}
.post-note{font-size:12px; color:var(--faint); line-height:1.7; margin:10px 0 0}
.cap-copy-btn{
  display:block; width:100%; box-sizing:border-box; margin-top:12px;
  border:1px solid var(--hair-strong); background:var(--surface-3); color:var(--text);
  border-radius:12px; padding:13px 10px; font-size:14.5px; font-weight:700; cursor:pointer;
  transition:transform .13s var(--ease);
}
.cap-copy-btn:active{transform:scale(.98)}
.cap-copy-btn[hidden]{display:none}
.tiktok-post-btn{
  display:block; width:100%; box-sizing:border-box; margin-top:10px;
  border:0; background:linear-gradient(160deg, var(--red-hi), var(--red) 58%, var(--red-deep));
  color:#fff; border-radius:12px; padding:13px 10px; font-size:14.5px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 20px rgba(232,54,45,.22);
  transition:transform .13s var(--ease);
}
.tiktok-post-btn:active{transform:scale(.98)}
.tiktok-post-btn[hidden]{display:none}
.tiktok-post-btn:disabled{cursor:default; box-shadow:none}
.tiktok-post-btn.is-done{
  background:var(--surface-3); color:var(--text);
  border:1px solid var(--hair-strong); box-shadow:none;
}
.cap-fallback-ta{
  display:block; width:100%; box-sizing:border-box; margin-top:10px; min-height:110px;
  background:var(--surface-3); color:var(--text); border:1px solid var(--hair-strong);
  border-radius:12px; padding:11px; font-size:14px; line-height:1.7;
}
.spinner-sm{width:13px; height:13px; border-width:2px}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:90;
  transform:translateX(-50%);
  background:rgba(22,22,28,.97); border:1px solid var(--hair-strong); color:var(--text);
  font-size:13.5px; padding:11px 17px; border-radius:999px; box-shadow:var(--shadow-pop);
  animation:toast-in .4s var(--ease) both; max-width:88vw; text-align:center;
}

/* ---------- update popup ---------- */
.update-pop{
  position:fixed; inset:0; z-index:85;
  display:flex; align-items:center; justify-content:center; padding:22px;
}
.update-backdrop{position:absolute; inset:0; background:rgba(7,4,20,.88); animation:fadein .3s var(--ease) both}
.update-card{
  position:relative; width:100%; max-width:356px; text-align:center;
  /* EZ Video Build: deep indigo/purple card with a gold hairline. */
  background:linear-gradient(180deg, #2b1e63, #160f33);
  border:1px solid rgba(232,169,12,.45); border-radius:22px;
  box-shadow:var(--shadow-pop), 0 18px 44px rgba(42,22,102,.5);
  padding:30px 24px 24px;
  animation:rise .55s var(--ease) both;
}
.update-ico{
  width:58px; height:58px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--amber);
  background-color:var(--red-deep);
  background-image:linear-gradient(150deg, var(--red-hi), var(--red) 55%, var(--red-deep));
  border:1px solid rgba(232,169,12,.55);
  box-shadow:0 10px 26px rgba(42,22,102,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.update-ico svg{width:27px; height:27px}
.update-title{font-size:19.5px; font-weight:800; margin:0; line-height:1.5}
.update-body{font-size:14px; color:#cfc8ee; line-height:1.8; margin:10px 0 22px}
.btn-update{
  width:100%; min-height:58px; border:0; cursor:pointer; color:#221503;
  /* FLAT gold (flat-button rule): one solid gold block, no gradient. */
  background-color:var(--amber);
  border-radius:14px; padding:16px;
  font-size:16.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 10px 26px rgba(232,169,12,.30);
  transition:transform .13s var(--ease), opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn-update:active{transform:scale(.975)}
.btn-update[disabled]{opacity:.7; pointer-events:none}

/* ---------- spinner ---------- */
.spinner{
  width:17px; height:17px; flex:0 0 auto; border-radius:50%;
  border:2.2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:rot .7s linear infinite;
}

/* ---------- keyframes ---------- */
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
@keyframes panel-in{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}
@keyframes card-in{from{opacity:0; transform:translateY(15px)}to{opacity:1; transform:none}}
@keyframes sheet-in{from{transform:translateY(46px); opacity:.4}to{transform:none; opacity:1}}
@keyframes toast-in{from{opacity:0; transform:translate(-50%,10px)}to{opacity:1; transform:translate(-50%,0)}}
@keyframes pulse-opacity{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes shake{
  0%,100%{transform:none} 22%{transform:translateX(-6px)}
  48%{transform:translateX(5px)} 72%{transform:translateX(-3px)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---- EZ Video Build: manual add form ---- */
.add-item-form{display:flex;flex-direction:column;gap:8px;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--r-card);padding:14px;margin:0 0 14px}
.add-item-title{margin:0;font-weight:700;font-size:14.5px;color:var(--text)}
.add-item-form input,.add-item-form select{background:var(--surface-2);
  border:1px solid var(--hair-strong);border-radius:10px;color:var(--text);
  padding:11px 12px;font-size:15px;font-family:inherit;width:100%}
.add-item-form input:focus,.add-item-form select:focus{border-color:var(--amber);outline:none}
.add-item-btn{align-self:flex-start;padding:10px 22px}