/* محاكاة IBM Plex Sans Arabic → Noto Sans Arabic (مدمج في Android) */
/* محاكاة IBM Plex Mono / Fira Code / Source Code Pro / Share Tech Mono / VT323 → Roboto Mono / monospace */


:root {
  --bg:#09090b; --s1:#111114; --s2:#18181c; --s3:#202025;
  --b1:#222228; --b2:#2e2e38; --b3:#3a3a48;
  --gold:#f0b429; --gold2:#d4991a; --gd:rgba(240,180,41,.09); --gg:rgba(240,180,41,.04);
  --tx:#eaeae8; --tx2:#8b8b89; --tx3:#444448;
  --green:#3ddc84; --red:#ff5555; --blue:#5da8e2;
  --r:14px; --rs:8px; --sans:'Noto Kufi Arabic','Noto Sans Arabic','Google Sans Arabic',sans-serif; --mono:'Roboto Mono','Droid Sans Mono','Courier New',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body,button,label,span,div,p,h1,h2,h3,footer{
  user-select:none;-webkit-user-select:none;-ms-user-select:none;
}
input,textarea{user-select:text;-webkit-user-select:text;}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);color:var(--tx);font-family:var(--sans);min-height:100vh;
  padding-bottom:60px;
  overscroll-behavior:none;
  overscroll-behavior-y:contain;
  background-image:
    radial-gradient(ellipse 120% 35% at 50% 0%,rgba(240,180,41,.055) 0%,transparent 65%),
    radial-gradient(ellipse 60% 20% at 80% 100%,rgba(93,168,226,.03) 0%,transparent 60%);
}
/* منع تمرير الصفحة عند فتح أي modal */
body.modal-open{overflow:hidden;position:fixed;width:100%;}

/* ══ PRESS / HOVER EFFECTS (Wardio pattern) ══════════════════════════
   hover → @media(hover:hover) فقط  ✦  active → جميع الأجهزة
══════════════════════════════════════════════════════════════════════ */
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

button:not(:disabled):active{transform:scale(.93);transition:transform .08s ease}
.btn-ic:active{box-shadow:0 0 0 2px rgba(93,168,226,.5)!important;border-color:var(--blue)!important;color:var(--blue)!important}
.btn-pv:active,.btn-rst:active{box-shadow:0 0 0 2px rgba(93,168,226,.4)!important}
.btn-snap:active{box-shadow:0 0 0 2px rgba(240,180,41,.5)!important}
.ftab:not(.on):active{box-shadow:0 0 0 2px rgba(93,168,226,.35);transform:scale(.97)}
.bp:not(.on):active{box-shadow:0 0 0 2px rgba(93,168,226,.35);transform:scale(.96)}
.gchip:not(.on):active{box-shadow:0 0 0 2px rgba(93,168,226,.35);transform:scale(.96)}
.dlbtn:active{box-shadow:0 0 0 2px rgba(61,220,132,.5)!important;transform:scale(.97)!important}
#btn-cvt:not(:disabled):active{transform:translateY(0) scale(.98)!important}
.btn-about:active{box-shadow:0 0 0 2px rgba(93,168,226,.5);transform:scale(.9)}

@media(hover:hover){
  .btn-ic:hover{border-color:var(--red);color:var(--red)}
  .btn-snap:hover{background:var(--gold2)}
  .btn-about:hover{border-color:var(--blue);color:var(--blue)}
  .btn-pv:hover,.btn-pv.act{border-color:var(--gold);color:var(--gold);background:var(--gd)}
  .btn-rst:hover{color:var(--tx);border-color:var(--b2)}
  .ftab:hover{border-color:var(--b2);color:var(--tx)}
  .bp:hover{border-color:var(--b2);color:var(--tx)}
  .gchip:hover{border-color:var(--b2);color:var(--tx)}
  .cthumb:hover{border-color:var(--gold)}
  .btn-extract:hover{border-color:var(--gold);color:var(--gold);background:var(--gg)}
  .btn-cancel:hover{background:rgba(255,85,85,.12);border-color:var(--red)}
  .dlbtn:hover{background:#33c970;transform:translateY(-1px)}
  #btn-cvt:not(:disabled):hover{background:var(--gold2);transform:translateY(-1px);box-shadow:0 8px 30px rgba(240,180,41,.32)}
  .fp-close:hover{border-color:var(--red);color:var(--red)}
  .about-close-btn:hover{border-color:var(--red);color:var(--red)}
  .btn-vid-prev:hover{border-color:var(--gold);color:var(--gold)}
  .about-dev-link:hover{text-decoration:underline}
  .dz:hover{border-color:var(--gold);background:var(--gg)}
}

/* ══ HEADER ══════════════════════════════════════════════════════════ */
.hdr{
  position:sticky;top:0;z-index:200;
  background:rgba(9,9,11,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--b1);
  height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;
}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{
  width:32px;height:32px;background:var(--gold);border-radius:7px;
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:800;
  color:#000;box-shadow:0 0 18px rgba(240,180,41,.35);letter-spacing:-.5px;
}
.logo-name{font-size:17px;font-weight:700;letter-spacing:-.4px}
.logo-name em{color:var(--gold);font-style:normal}
.hdr-right{display:flex;align-items:center;gap:8px}
.hdr-v{font-family:var(--mono);font-size:10px;color:var(--gold);background:rgba(240,180,41,.09);border:1px solid rgba(240,180,41,.3);padding:3px 10px;border-radius:5px;letter-spacing:1px;font-weight:600}
.btn-about{
  width:32px;height:32px;border-radius:7px;background:var(--s2);border:1px solid var(--b1);
  color:var(--tx2);cursor:pointer;display:grid;place-items:center;
  transition:all .15s;flex-shrink:0;
}
.btn-about svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* ══ STEP BAR ════════════════════════════════════════════════════════ */
.stepbar{
  display:flex;align-items:center;justify-content:center;gap:0;
  padding:10px 16px;overflow-x:auto;scrollbar-width:none;
  background:var(--s1);border-bottom:1px solid var(--b1);
}
.stepbar::-webkit-scrollbar{display:none}
.si{display:flex;align-items:center;flex-shrink:0;gap:4px}
.sd{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;font-family:var(--mono);
  background:var(--s2);border:1.5px solid var(--b2);color:var(--tx2);
  transition:all .25s ease;flex-shrink:0;
}
.sd.active{background:var(--gold);border-color:var(--gold);color:#000;box-shadow:0 0 14px rgba(240,180,41,.5)}
.sd.done{background:rgba(61,220,132,.12);border-color:var(--green);color:var(--green)}
.sl{font-size:10px;color:var(--tx2);white-space:nowrap;margin:0 2px}
.sc{width:28px;height:1px;background:var(--b1);flex-shrink:0}

/* ══ MAIN ════════════════════════════════════════════════════════════ */
.main{max-width:640px;margin:0 auto;padding:10px 12px;display:flex;flex-direction:column;gap:10px}

/* ══ CARD ════════════════════════════════════════════════════════════ */
.card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);position:relative}
.ch{
  padding:12px 16px;border-bottom:1px solid var(--b1);background:var(--s2);
  border-radius:var(--r) var(--r) 0 0;display:flex;align-items:center;gap:10px;
}
.cb-step{
  width:22px;height:22px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;font-size:10px;font-weight:800;color:#000;font-family:var(--mono);flex-shrink:0;
}
.ct{font-size:11px;font-weight:600;color:var(--tx2);letter-spacing:.6px;text-transform:uppercase;flex:1}
.cs{font-size:10px;font-family:var(--mono);color:var(--green)}
.cb{padding:16px}

/* ══ DROP ZONE ═══════════════════════════════════════════════════════ */
.dz{
  border:2px dashed var(--b2);border-radius:var(--rs);
  padding:38px 16px;text-align:center;cursor:pointer;
  transition:all .2s;position:relative;
}
.dz input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;width:100%;height:100%}
.dz-ic{display:flex;align-items:center;justify-content:center;margin-bottom:10px;
        color:var(--gold);filter:drop-shadow(0 0 10px rgba(240,180,41,.35))}
.dz-ic svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.dz-t{font-size:14px;font-weight:600;margin-bottom:4px}
.dz-s{font-size:11px;color:var(--tx2);font-family:var(--mono)}

/* ══ FILE PILL ═══════════════════════════════════════════════════════ */
.fp{display:none;align-items:center;gap:12px;padding:11px 14px;background:var(--gd);border:1px solid rgba(240,180,41,.18);border-radius:var(--rs);margin-top:10px}
.fp.show{display:flex}
.fp-ic{display:flex;align-items:center;color:var(--gold);flex-shrink:0}
.fp-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.fp-nfo{flex:1;min-width:0}
.fp-n{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-m{font-size:11px;color:var(--tx2);font-family:var(--mono);margin-top:2px}
.btn-ic{
  width:30px;height:30px;border-radius:7px;background:none;border:1px solid var(--b2);
  color:var(--tx2);cursor:pointer;display:grid;place-items:center;
  transition:all .15s;flex-shrink:0;
}
.btn-ic svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}

/* ══ NOTE ════════════════════════════════════════════════════════════ */
.note{display:flex;gap:8px;padding:9px 12px;border-radius:7px;font-size:11px;color:var(--tx2);line-height:1.7;margin-top:10px}
.note.info{background:rgba(93,168,226,.06);border:1px solid rgba(93,168,226,.14)}
.note.warn{background:rgba(240,180,41,.06);border:1px solid rgba(240,180,41,.2)}
.note-ic{flex-shrink:0;font-size:13px;margin-top:1px;display:flex;align-items:flex-start}
.note-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.note.warn .note-ic svg{stroke:var(--gold)}
.note.info .note-ic svg{stroke:var(--blue)}

/* ══ TRIM CARD ═══════════════════════════════════════════════════════ */
#card-trim{display:none}
#card-trim.show{display:block}
.wf-loading{display:flex;align-items:center;gap:12px;padding:20px 0;color:var(--tx2);font-size:13px}
.wf-body{display:none}
.wf-body.show{display:block}
.wf-loading svg{flex-shrink:0}

/* Waveform container */
.wf-times{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--tx2);margin-bottom:6px;padding:0 2px}
.wf-wrap{
  position:relative;height:108px;border-radius:var(--rs);
  touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;
  background:var(--s2);border:1px solid var(--b1);cursor:pointer;
}
#wf-cv{position:absolute;top:0;left:0;width:100%;height:80px;display:block}
.wf-dim{position:absolute;top:0;height:80px;background:rgba(9,9,11,.62);pointer-events:none}
.wf-dim.L{left:0}
.wf-dim.R{right:0;left:auto}
.wf-h{
  position:absolute;top:0;height:108px;width:44px;
  transform:translateX(-50%);touch-action:none;z-index:10;cursor:ew-resize;
}
.wf-hline{
  position:absolute;top:0;height:80px;width:2px;
  left:50%;transform:translateX(-50%);
  background:var(--gold);box-shadow:0 0 10px rgba(240,180,41,.6);
}
.wf-knob{
  position:absolute;top:80px;left:50%;transform:translateX(-50%);
  width:28px;height:26px;background:var(--gold);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:#000;font-size:9px;font-weight:800;font-family:var(--mono);
  box-shadow:0 2px 10px rgba(240,180,41,.5);white-space:nowrap;
}
.wf-ph{position:absolute;top:0;height:80px;width:1.5px;background:#fff;opacity:.75;pointer-events:none;display:none;will-change:left}

/* Trim controls */
.trim-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.tfield{display:flex;flex-direction:column;gap:4px}
.tfield label{font-size:10px;color:var(--tx2);font-family:var(--mono);letter-spacing:.5px}
.tinput{
  background:var(--s2);border:1px solid var(--b1);color:var(--tx);
  border-radius:7px;padding:9px 10px;font-size:15px;font-family:var(--mono);
  width:100%;outline:none;text-align:center;transition:border-color .15s;
}
.tinput:focus{border-color:var(--gold)}
.trim-info{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 13px;background:var(--s2);border:1px solid var(--b1);border-radius:7px;margin-bottom:12px;
}
.tid-label{font-family:var(--mono);font-size:10px;color:var(--tx2);letter-spacing:.5px}
.tid-val{font-family:var(--mono);font-size:13px;color:var(--gold);font-weight:700}

/* Preview bar */
.pvbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn-pv{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border-radius:20px;border:1px solid var(--b2);background:var(--s2);
  color:var(--tx);font-size:12px;cursor:pointer;transition:all .15s;font-family:var(--sans);
}
.btn-pv.stop{border-color:var(--red);color:var(--red);background:rgba(255,85,85,.06)}
.btn-rst{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:20px;border:1px solid rgba(240,180,41,.35);background:rgba(240,180,41,.07);
  color:var(--gold);font-size:12px;cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;
  font-family:var(--sans);
}
.btn-rst:active{
  background:rgba(240,180,41,.15);border-color:var(--gold);
  box-shadow:0 0 12px rgba(240,180,41,.25);transform:scale(.96);
}
@media(hover:hover){
  .btn-rst:hover{background:rgba(240,180,41,.12);border-color:var(--gold);box-shadow:0 0 16px rgba(240,180,41,.2)}
}
.pv-time{font-family:var(--mono);font-size:11px;color:var(--tx2);margin-right:auto}
.btn-pv svg,.btn-rst svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.btn-rst svg{transition:transform .35s cubic-bezier(.25,.8,.25,1)}
.btn-rst:active svg{transform:rotate(-180deg)}
@media(hover:hover){.btn-rst:hover svg{transform:rotate(-180deg)}}
.btn-pv svg.filled{fill:currentColor;stroke:none}

/* Preview seekbar — Wardio style */
.pv-seekbar-wrap{
  margin-top:10px;padding:6px 0;
  display:flex;align-items:center;gap:10px;
}
.pv-prog-container{
  flex:1;height:28px;display:flex;align-items:center;
  cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;
  position:relative;
}
.pv-prog-track{
  width:100%;height:4px;background:var(--b2);border-radius:3px;
  position:relative;transition:height .12s ease;
  /* لا overflow:hidden — يسبب مشاكل مع GPU layers */
}
.pv-prog-container.dragging .pv-prog-track,
.pv-prog-container:active .pv-prog-track{height:6px}
.pv-prog-bar{
  position:absolute;left:0;top:0;
  height:100%;width:0%;background:var(--gold);border-radius:3px;
  will-change:width;
}
.pv-prog-thumb{
  position:absolute;width:13px;height:13px;background:var(--tx);
  border-radius:50%;top:50%;left:0;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .12s ease,background .15s;
  pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,.6);
  will-change:transform,left;
}
.pv-prog-container.dragging .pv-prog-thumb{
  transform:translate(-50%,-50%) scale(1);background:var(--gold);
}
.pv-prog-container.playing .pv-prog-thumb{
  transform:translate(-50%,-50%) scale(.85);background:var(--gold);
}
.pv-seekbar-time{font-family:var(--mono);font-size:10px;color:var(--tx2);white-space:nowrap;min-width:36px;text-align:center}

/* ══ FORMAT TABS ═════════════════════════════════════════════════════ */
.ftabs{display:flex;gap:6px;margin-bottom:14px}
.ftab{
  flex:1;padding:10px 8px;border:1px solid var(--b1);border-radius:var(--rs);
  background:var(--s2);color:var(--tx2);cursor:pointer;text-align:center;
  transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.ftab.on{border-color:var(--gold);background:var(--gd);color:var(--gold)}
.fn{font-size:17px;font-weight:800;font-family:var(--mono)}
.fd{font-size:9px;opacity:.7;letter-spacing:.3px}
.fb{font-size:8px;font-family:var(--mono);padding:1px 5px;border-radius:3px;background:var(--gold);color:#000;font-weight:700;opacity:0;transition:opacity .15s}
.ftab.on .fb{opacity:1}

/* ══ BITRATE PILLS ═══════════════════════════════════════════════════ */
.bpills{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}
.bp{
  padding:7px 13px;border:1px solid var(--b1);border-radius:20px;
  background:var(--s2);color:var(--tx2);font-size:12px;font-family:var(--mono);
  cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.bp.on{background:var(--gd);border-color:var(--gold);color:var(--gold)}
.bp-s{font-size:9px;opacity:.6}

/* ══ TOGGLES ════════════════════════════════════════════════════════ */
.trow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--b1)}
.trow:last-child{border-bottom:none;padding-bottom:0}
.tinfo{flex:1;margin-left:14px}
.tlabel{font-size:13px;font-weight:500}
.tsub{font-size:11px;color:var(--tx2);margin-top:2px;line-height:1.5}
.tsw{
  width:44px;height:24px;background:var(--s3);border:1.5px solid var(--b2);
  border-radius:12px;position:relative;cursor:pointer;transition:all .2s;flex-shrink:0;
}
.tsw::after{
  content:'';position:absolute;top:3px;left:3px;
  width:16px;height:16px;background:var(--tx3);border-radius:50%;transition:all .2s;
}
.tsw.on{background:rgba(240,180,41,.15);border-color:var(--gold)}
.tsw.on::after{background:var(--gold);transform:translateX(20px)}

/* ══ FORM ════════════════════════════════════════════════════════════ */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:4px}
.field.full{grid-column:1/-1}
label{font-size:10px;color:var(--tx2);font-family:var(--mono);letter-spacing:.5px}
input[type=text],input[type=number],textarea,select{
  background:var(--s2);border:1px solid var(--b1);color:var(--tx);
  border-radius:7px;padding:9px 11px;font-size:13px;font-family:var(--sans);
  width:100%;outline:none;transition:border-color .15s;-webkit-appearance:none;appearance:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--gold)}
input::placeholder,textarea::placeholder{color:var(--tx3)}
textarea{resize:vertical;min-height:52px;line-height:1.6}
.genres{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.gchip{
  padding:5px 12px;border-radius:20px;background:var(--s2);border:1px solid var(--b1);
  font-size:11px;cursor:pointer;color:var(--tx2);transition:all .15s;
}
.gchip.on{background:var(--gd);border-color:var(--gold);color:var(--gold)}
.cover-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.cthumb{
  width:72px;height:72px;background:var(--s2);border:1px solid var(--b1);
  border-radius:10px;display:grid;place-items:center;font-size:22px;
  cursor:pointer;overflow:hidden;flex-shrink:0;transition:border-color .15s;
  color:var(--tx2);
}
.cthumb svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.cthumb img{width:100%;height:100%;object-fit:cover}
.cinfo{flex:1;min-width:0}
.cinfo .ctitle{font-size:13px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cinfo .chint{font-size:11px;color:var(--tx2);line-height:1.7}
.cbadge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-family:var(--mono);padding:2px 7px;border-radius:3px;font-weight:600;letter-spacing:.4px}
.cbadge.e{background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.25);color:var(--green)}
.cbadge.s{background:rgba(255,85,85,.08);border:1px solid rgba(255,85,85,.2);color:var(--red)}

/* ══ DIVIDER ═════════════════════════════════════════════════════════ */
.div{font-size:9px;color:var(--tx2);font-family:var(--mono);letter-spacing:1px;display:flex;align-items:center;gap:8px;margin:14px 0 10px}
.div::before,.div::after{content:'';flex:1;height:1px;background:var(--b1)}

/* ══ SIZE ESTIMATOR ══════════════════════════════════════════════════ */
.sest{display:none;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--s2);border:1px solid var(--b1);border-radius:7px;margin-top:12px}
.sest.show{display:flex}
.se-l{font-size:10px;color:var(--tx2);font-family:var(--mono);letter-spacing:.5px}
.se-v{font-size:13px;font-family:var(--mono);color:var(--gold);font-weight:700}
.se-acc{font-size:9px;color:var(--tx2);font-family:var(--mono)}

/* ══ FORMAT SECTIONS ═════════════════════════════════════════════════ */
.fsec{display:none}
.fsec.show{display:block}

/* ══ CONVERT BUTTON ══════════════════════════════════════════════════ */
#btn-cvt{
  width:100%;padding:16px;background:var(--gold);color:#000;
  font-size:15px;font-weight:700;border:none;border-radius:11px;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;
  gap:8px;font-family:var(--sans);letter-spacing:.2px;
  box-shadow:0 6px 24px rgba(240,180,41,.22);
}
#btn-cvt:disabled{opacity:.32;cursor:not-allowed;transform:none;box-shadow:none}
#btn-cvt svg{width:17px;height:17px;flex-shrink:0}

/* ══ PROGRESS ════════════════════════════════════════════════════════ */
.prog{display:none;margin-top:14px}
.prog.show{display:block}
.prog-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--tx2);font-family:var(--mono);margin-bottom:6px}
.prog-track{height:5px;background:var(--s2);border:1px solid var(--b1);border-radius:3px;overflow:hidden;margin-bottom:8px}
.prog-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),#ffe066);border-radius:3px;transition:width .35s ease;box-shadow:0 0 10px rgba(240,180,41,.45)}
.plog{font-family:var(--mono);font-size:10px;color:var(--tx2);background:var(--s2);border:1px solid var(--b1);border-radius:7px;padding:8px 12px;max-height:66px;overflow-y:auto;line-height:2}

/* Cancel button */
.btn-cancel{
  display:none;align-items:center;gap:6px;padding:7px 14px;margin-top:10px;
  border-radius:8px;border:1px solid rgba(255,85,85,.3);background:rgba(255,85,85,.06);
  color:var(--red);font-size:12px;cursor:pointer;transition:all .15s;font-family:var(--sans);
}
.btn-cancel.show{display:inline-flex}
.btn-cancel svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}

/* ══ RESULT ══════════════════════════════════════════════════════════ */
.rbox{display:none;margin-top:14px;padding:20px;background:rgba(61,220,132,.04);border:1px solid rgba(61,220,132,.16);border-radius:11px;text-align:center}
.rbox.show{display:block}
.r-ic{display:flex;align-items:center;justify-content:center;margin-bottom:8px;color:var(--green)}
.r-ic svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.r-t{font-size:16px;font-weight:700;color:var(--green);margin-bottom:3px}
.r-s{font-size:11px;color:var(--tx2);font-family:var(--mono);margin-bottom:16px;line-height:1.8}
.dlbtn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 28px;
  background:var(--green);color:#000;font-weight:700;font-size:13px;
  border-radius:8px;text-decoration:none;transition:all .15s;font-family:var(--sans);
}
.dlbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;flex-shrink:0}
.ebox{display:none;margin-top:14px;padding:12px 14px;background:rgba(255,85,85,.05);border:1px solid rgba(255,85,85,.18);border-radius:8px;font-size:12px;color:var(--red);line-height:1.7;align-items:center;gap:8px}
.ebox.show{display:flex}
.ebox svg{flex-shrink:0;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ══ ANIMATIONS ══════════════════════════════════════════════════════ */
.svg-spin{animation:sp 1.2s linear infinite;display:inline-block;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.fadein{animation:fadeIn .25s ease}

/* ══ CUSTOM SELECT ═══════════════════════════════════════════════════ */
.cs-wrap{position:relative;width:100%}
.cs-trigger{
  width:100%;background:var(--s2);border:1px solid var(--b1);color:var(--tx);
  border-radius:7px;padding:9px 11px;font-size:13px;font-family:var(--sans);
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;transition:border-color .15s,box-shadow .15s;
  user-select:none;-webkit-user-select:none;gap:8px;
}
.cs-trigger.open,.cs-trigger:active{border-color:var(--gold)}
.cs-trigger-val{flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.cs-arrow{flex-shrink:0;transition:transform .2s;color:var(--tx2);display:flex;align-items:center}
.cs-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.cs-trigger.open .cs-arrow{transform:rotate(180deg);color:var(--gold)}
.cs-drop{
  position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:400;
  background:var(--s1);border:1px solid rgba(240,180,41,.4);border-radius:10px;
  overflow:hidden;
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;
  transition:opacity .18s cubic-bezier(.25,.8,.25,1),transform .18s cubic-bezier(.25,.8,.25,1);
  box-shadow:0 12px 40px rgba(0,0,0,.65),0 0 0 1px rgba(240,180,41,.08),0 0 20px rgba(240,180,41,.06);
}
.cs-drop.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.cs-opt{
  display:flex;align-items:center;padding:12px 14px;font-size:13px;font-family:var(--sans);
  cursor:pointer;transition:background .1s;gap:10px;
  border-bottom:1px solid var(--b1);position:relative;
}
.cs-opt:last-child{border-bottom:none}
.cs-opt:active{background:var(--gd)}
@media(hover:hover){.cs-opt:hover{background:rgba(240,180,41,.06)}}
.cs-opt.sel{background:rgba(240,180,41,.07)}
.cs-opt-check{width:15px;height:15px;flex-shrink:0;color:var(--gold);opacity:0;transition:opacity .15s}
.cs-opt-check svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cs-opt.sel .cs-opt-check{opacity:1}
.cs-opt-text{flex:1;text-align:right}
.cs-opt-label{font-size:13px;color:var(--tx);line-height:1.3}
.cs-opt-sub{font-size:10px;color:var(--tx2);font-family:var(--mono);margin-top:2px}
.cs-opt.sel .cs-opt-label{color:var(--gold)}

/* ══ WELCOME MODAL ══════════════════════════════════════════════════ */
.welcome-modal{
  display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  align-items:center;justify-content:center;padding:20px;
}
.welcome-modal.show{display:flex;animation:wm-bg-in .3s ease both}
@keyframes wm-bg-in{from{opacity:0}to{opacity:1}}
.welcome-box{
  background:var(--s1);border:1px solid rgba(240,180,41,.25);border-radius:20px;
  width:100%;max-width:400px;overflow:hidden;
  animation:wm-in .4s cubic-bezier(.22,1,.36,1) both;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(240,180,41,.1),0 0 60px rgba(240,180,41,.06);
}
@keyframes wm-in{from{transform:scale(.88) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.wm-glow{
  height:3px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold2),transparent);
  animation:wm-glow-slide 2s ease-in-out infinite alternate;
}
@keyframes wm-glow-slide{from{opacity:.6}to{opacity:1}}
.wm-body{padding:28px 24px 24px;text-align:center}
.wm-icon{
  width:64px;height:64px;background:linear-gradient(145deg,rgba(240,180,41,.2),rgba(240,180,41,.06));
  border:1.5px solid rgba(240,180,41,.3);border-radius:18px;
  display:grid;place-items:center;margin:0 auto 16px;
  font-family:var(--mono);font-size:22px;font-weight:900;color:var(--gold);
  box-shadow:0 0 30px rgba(240,180,41,.2),inset 0 1px 0 rgba(255,255,255,.08);
}
.wm-title{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
.wm-title em{color:var(--gold);font-style:normal}
.wm-sub{font-size:12px;color:var(--tx2);margin-bottom:20px;line-height:1.6;font-family:var(--mono)}
.wm-features{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px;text-align:right;
}
.wm-feat{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:8px;
}
.wm-feat-ic{font-size:16px;flex-shrink:0}
.wm-feat-txt{font-size:11px;color:var(--tx2);line-height:1.4}
.wm-btn{
  width:100%;padding:14px;background:var(--gold);color:#000;
  font-size:14px;font-weight:700;border:none;border-radius:10px;
  cursor:pointer;transition:all .15s;font-family:var(--sans);
  box-shadow:0 6px 24px rgba(240,180,41,.3);
  letter-spacing:.2px;
}
.wm-btn:active{transform:scale(.97)}
@media(hover:hover){.wm-btn:hover{background:var(--gold2);transform:translateY(-1px);box-shadow:0 10px 32px rgba(240,180,41,.4)}}
.wm-footer{font-size:10px;color:var(--tx2);font-family:var(--mono);margin-top:12px;opacity:.7}

/* ══ FRAME PICKER MODAL ══════════════════════════════════════════════ */
.fp-modal{
  display:none;position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:16px;
}
.fp-modal.show{display:flex}
.fp-box{
  background:var(--s1);border:1px solid var(--b2);border-radius:16px;
  width:100%;max-width:520px;overflow:hidden;
}
.fp-header{
  padding:14px 16px;background:var(--s2);border-bottom:1px solid var(--b1);
  display:flex;align-items:center;gap:10px;
}
.fp-header-icon{color:var(--gold);display:flex;align-items:center}
.fp-header-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.fp-header-title{font-size:13px;font-weight:600;flex:1;color:var(--tx)}
.fp-close{
  width:28px;height:28px;border:1px solid var(--b2);background:none;
  border-radius:7px;color:var(--tx2);cursor:pointer;display:grid;place-items:center;
  transition:all .15s;
}
.fp-close svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.fp-vid-wrap{
  position:relative;background:#000;
  display:flex;align-items:center;justify-content:center;
  max-height:280px;overflow:hidden;
}
#fp-vid{width:100%;max-height:280px;object-fit:contain;display:block}
.fp-canvas-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
#fp-cv{display:none}
.fp-body{padding:14px 16px}
.fp-seek-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fp-prog-container{
  flex:1;height:32px;display:flex;align-items:center;
  cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;
  position:relative;
}
.fp-prog-track{
  width:100%;height:4px;background:var(--b2);border-radius:3px;
  position:relative;transition:height .12s ease;
}
.fp-prog-container.dragging .fp-prog-track,
.fp-prog-container:active .fp-prog-track{height:6px}
.fp-prog-bar{
  position:absolute;left:0;top:0;
  height:100%;width:0%;background:var(--gold);border-radius:3px;
  will-change:width;
}
.fp-prog-thumb{
  position:absolute;width:14px;height:14px;background:var(--gold);
  border-radius:50%;top:50%;left:0;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .12s ease;pointer-events:none;
  box-shadow:0 0 8px rgba(240,180,41,.5);will-change:transform,left;
}
.fp-prog-container.dragging .fp-prog-thumb{transform:translate(-50%,-50%) scale(1)}
.fp-time{font-family:var(--mono);font-size:11px;color:var(--tx2);white-space:nowrap;min-width:45px;text-align:center}
.fp-actions{display:flex;gap:8px}
.btn-snap{
  flex:1;padding:11px;background:var(--gold);color:#000;font-weight:700;
  font-size:13px;border:none;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all .15s;font-family:var(--sans);
}
.btn-snap svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.btn-vid-prev{
  width:42px;height:42px;border:1px solid var(--b2);background:var(--s2);
  border-radius:9px;cursor:pointer;color:var(--tx2);
  display:grid;place-items:center;transition:all .15s;
}
.btn-vid-prev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.btn-vid-prev svg.filled{fill:currentColor;stroke:none}
.btn-extract{
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;
  border-radius:7px;border:1px dashed var(--b2);background:none;
  color:var(--tx2);font-size:11px;cursor:pointer;transition:all .15s;
  font-family:var(--sans);margin-top:8px;
}
.btn-extract:disabled{opacity:.3;cursor:not-allowed}
.btn-extract svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ══ FOOTER ══════════════════════════════════════════════════════════ */
footer{text-align:center;font-size:10px;color:var(--tx2);font-family:var(--mono);padding:28px 16px 0;line-height:2}

/* ══ ABOUT MODAL — Bottom Sheet (Wardio style) ═══════════════════════ */
.about-modal{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  align-items:flex-end;justify-content:center;
}
.about-modal.show{display:flex;animation:abt-bg-in .25s ease both}
@keyframes abt-bg-in{from{opacity:0}to{opacity:1}}
.about-box{
  background:var(--s1);border:1px solid rgba(255,255,255,.08);
  border-radius:22px 22px 0 0;width:100%;max-width:520px;
  max-height:88vh;
  display:flex;flex-direction:column;
  animation:abt-slide .32s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes abt-slide{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}
.about-handle{width:36px;height:4px;background:rgba(255,255,255,.14);border-radius:2px;margin:10px auto 0;flex-shrink:0}
.about-hdr{
  padding:8px 16px 6px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  border-bottom:1px solid var(--b1);
}
.about-hdr-title{font-size:10px;font-weight:600;color:var(--tx2);letter-spacing:1px;text-transform:uppercase;font-family:var(--mono)}
.about-close-btn{
  width:28px;height:28px;border:1px solid var(--b2);background:rgba(255,255,255,.04);
  border-radius:7px;color:var(--tx2);cursor:pointer;display:grid;place-items:center;transition:all .15s;
}
.about-close-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.about-body{
  padding:12px 16px 28px;
  display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* App identity — compact horizontal */
.about-id{
  display:flex;align-items:center;gap:12px;
  padding:4px 0;
}
.about-id-badge{
  width:48px;height:48px;flex-shrink:0;
  background:linear-gradient(145deg,rgba(240,180,41,.22),rgba(240,180,41,.05));
  border:1.5px solid rgba(240,180,41,.35);border-radius:14px;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:16px;font-weight:900;color:var(--gold);
  box-shadow:0 0 20px rgba(240,180,41,.18),inset 0 1px 0 rgba(255,255,255,.06);
}
.about-id-info{display:flex;flex-direction:column;gap:3px}
.about-id-name{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1}
.about-id-name em{color:var(--gold);font-style:normal}
.about-id-ver{
  font-size:9px;font-family:var(--mono);letter-spacing:1.2px;
  padding:3px 12px;border-radius:20px;width:fit-content;
  background:linear-gradient(90deg,rgba(240,180,41,.18),rgba(240,180,41,.10));
  border:1px solid rgba(240,180,41,.55);
  color:var(--gold);
  box-shadow:0 0 10px rgba(240,180,41,.35),0 0 22px rgba(240,180,41,.15),inset 0 0 8px rgba(240,180,41,.08);
  text-shadow:0 0 8px rgba(240,180,41,.8);
}
.about-id-desc{font-size:11px;color:var(--tx2);line-height:1.5}

/* Dev card */
.about-dev-card{
  width:100%;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;
}
.about-dev-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:10px}
.about-dev-row+.about-dev-row{border-top:1px solid rgba(255,255,255,.055)}
.about-dev-lbl{
  display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tx2);white-space:nowrap;flex-shrink:0;
}
.about-dev-lbl svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.7;flex-shrink:0}
.about-dev-val{font-size:12px;font-weight:700;color:var(--tx);font-family:var(--mono)}
.about-dev-link{
  font-size:12px;font-weight:700;color:var(--blue);text-decoration:none;
  font-family:var(--mono);direction:ltr;display:block;transition:color .15s;
}

/* Tech line — single compact row */
.about-tech{
  width:100%;padding:8px 12px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055);border-radius:8px;
  font-size:9px;color:var(--tx2);font-family:var(--mono);line-height:2;text-align:center;letter-spacing:.2px;
}

/* ══ LOG FONT PICKER ═════════════════════════════════════════════════ */
.lf-section{width:100%}
.lf-title{
  font-size:9px;font-family:var(--mono);color:var(--tx2);letter-spacing:1px;
  text-transform:uppercase;margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}
.lf-title::before,.lf-title::after{content:'';flex:1;height:1px;background:var(--b1)}

/* horizontal scroll row */
.lf-row{
  display:flex;gap:7px;
  overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
  touch-action:pan-x;
}
.lf-row::-webkit-scrollbar{display:none}
.lf-chip{
  background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.07);
  border-radius:10px;padding:8px 11px;cursor:pointer;
  transition:border-color .15s,background .15s;
  display:flex;flex-direction:column;gap:4px;
  flex-shrink:0;min-width:110px;position:relative;
}
.lf-chip.on{border-color:var(--gold);background:rgba(240,180,41,.07)}
.lf-chip-dot{
  width:6px;height:6px;border-radius:50%;background:var(--b3);
  position:absolute;top:8px;left:10px;transition:background .15s;
}
.lf-chip.on .lf-chip-dot{background:var(--gold);box-shadow:0 0 6px rgba(240,180,41,.6)}
.lf-chip-name{
  font-size:9px;color:var(--tx2);letter-spacing:.4px;font-family:var(--mono);
  text-transform:uppercase;padding-right:14px;
}
.lf-chip.on .lf-chip-name{color:var(--gold)}
.lf-chip-preview{
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lf-chip-tag{
  font-size:8px;color:var(--tx2);font-family:var(--mono);
}
.lf-chip.on .lf-chip-tag{color:rgba(240,180,41,.6)}

/* preview box */
.lf-preview-wrap{
  width:100%;
  background:var(--s2);border:1px solid var(--b1);border-radius:8px;
  padding:9px 12px;
}
.lf-preview-label{font-size:9px;color:var(--tx2);font-family:var(--mono);letter-spacing:.5px;margin-bottom:5px;direction:ltr}
.lf-preview-text{
  font-size:10px;direction:ltr;line-height:2;
  /* font-family and color set inline by JS — no transition to prevent zoom */
}

/* ══ FADE CONTROLS ═══════════════════════════════════════════════════ */
.fade-row{
  display:flex;gap:10px;margin-top:10px;
}
.fade-field{
  flex:1;background:var(--s2);border:1px solid var(--b1);border-radius:9px;
  padding:10px 12px;display:flex;flex-direction:column;gap:7px;
}
.fade-field label{font-size:10px;color:var(--tx2);font-family:var(--mono);letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.fade-field label svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.7;flex-shrink:0}
.fade-slider-row{display:flex;align-items:center;gap:8px}
.fade-slider{
  -webkit-appearance:none;appearance:none;flex:1;height:4px;
  background:var(--b2);border-radius:3px;outline:none;cursor:pointer;
  transition:height .12s;
}
.fade-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  background:var(--gold);border-radius:50%;cursor:pointer;
  box-shadow:0 0 8px rgba(240,180,41,.5);
  transition:transform .1s;
}
.fade-slider:active::-webkit-slider-thumb{transform:scale(1.25)}
.fade-val{
  font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--gold);min-width:34px;text-align:center;
}
.fade-off{opacity:.35;pointer-events:none}
.fade-sep{
  display:flex;align-items:center;justify-content:center;
  padding-top:10px;
  color:var(--tx2);font-size:9px;font-family:var(--mono);letter-spacing:.5px;
  gap:6px;
}
.fade-sep::before,.fade-sep::after{content:'';flex:1;height:1px;background:var(--b1)}
.fade-reset{
  display:flex;align-items:center;justify-content:flex-end;margin-top:10px;
}
.fade-reset-btn{
  display:flex;align-items:center;gap:6px;
  background:rgba(240,180,41,.07);
  border:1px solid rgba(240,180,41,.35);
  border-radius:8px;
  color:var(--gold);
  font-size:11px;font-family:var(--mono);letter-spacing:.5px;
  padding:7px 13px;cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;
  box-shadow:0 0 0 0 rgba(240,180,41,0);
}
.fade-reset-btn svg{
  width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
  transition:transform .35s cubic-bezier(.25,.8,.25,1);
}
.fade-reset-btn:active{
  background:rgba(240,180,41,.15);
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(240,180,41,.25);
  transform:scale(.96);
}
.fade-reset-btn:active svg{transform:rotate(-180deg)}
@media(hover:hover){
  .fade-reset-btn:hover{
    background:rgba(240,180,41,.12);
    border-color:var(--gold);
    box-shadow:0 0 16px rgba(240,180,41,.2);
  }
  .fade-reset-btn:hover svg{transform:rotate(-180deg)}
}

/* ══ MEDIA QUERIES ═══════════════════════════════════════════════════ */
@media(max-width:480px){
  .fgrid{grid-template-columns:1fr}
  .field.full{grid-column:1}
  .cover-row{flex-direction:column}
  .sl{display:none}
  .sc{width:18px}
}

/* ══ PROGRESS PHASE COLORS ═══════════════════════════════════════════ */
.prog-bar.phase-yellow{background:linear-gradient(90deg,var(--gold),#ffe066);box-shadow:0 0 10px rgba(240,180,41,.45);transition:width .35s ease,background-color .4s ease}
.prog-bar.phase-blue{background:linear-gradient(90deg,var(--blue),#87ceeb);box-shadow:0 0 10px rgba(93,168,226,.45);transition:width .35s ease,background-color .4s ease}
.prog-bar.phase-green{background:linear-gradient(90deg,var(--green),#7fffb2);box-shadow:0 0 10px rgba(61,220,132,.55);transition:width .35s ease,background-color .4s ease}

/* ══ CELEBRATE ANIMATION ════════════════════════════════════════════ */
@keyframes btn-celebrate{
  0%  {box-shadow:0 4px 18px rgba(240,180,41,.2)}
  18% {box-shadow:0 0 44px 14px rgba(240,180,41,.75),0 4px 18px rgba(61,220,132,.3)}
  45% {box-shadow:0 0 22px 5px rgba(240,180,41,.4),0 4px 18px rgba(61,220,132,.25)}
  70% {box-shadow:0 0 36px 10px rgba(240,180,41,.65),0 4px 18px rgba(61,220,132,.3)}
  100%{box-shadow:0 4px 24px rgba(61,220,132,.28)}
}
.dlbtn.celebrate{animation:btn-celebrate 1.5s ease-out forwards}

/* ══ OUTPUT FILENAME PREVIEW ════════════════════════════════════════ */
.out-name-prev{
  display:none;align-items:center;gap:8px;padding:8px 12px;
  background:var(--s2);border:1px solid var(--b1);border-radius:7px;margin-bottom:12px;
  overflow:hidden;
}
.out-name-prev.show{display:flex}
.out-name-lbl{font-size:9px;color:var(--tx2);font-family:var(--mono);letter-spacing:.5px;flex-shrink:0;white-space:nowrap}
.out-name-txt{
  font-size:11px;font-family:var(--mono);color:var(--gold);font-weight:600;
  direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left;
}

/* ══ TRIM UNIT TOGGLE ═══════════════════════════════════════════════ */
.btn-unit-toggle{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(240,180,41,.06);border:1px solid rgba(240,180,41,.22);
  border-radius:7px;padding:5px 10px;cursor:pointer;color:var(--gold);
  font-size:10px;font-family:var(--mono);letter-spacing:.4px;
  transition:background .15s,border-color .15s;
}
.btn-unit-toggle:active{background:rgba(240,180,41,.18);border-color:var(--gold);transform:scale(.96)}
.btn-unit-toggle svg{flex-shrink:0}


/* ══ TOAST NOTIFICATION ═════════════════════════════════════════════ */
#toast-wrap{
  position:fixed;bottom:32px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:12px;
  background:#18181c;
  border:1px solid rgba(240,180,41,.35);
  border-right:3px solid var(--gold);
  border-radius:10px;
  padding:13px 18px 13px 14px;
  min-width:260px;max-width:340px;
  box-shadow:0 6px 32px rgba(0,0,0,.6),0 0 18px rgba(240,180,41,.12);
  pointer-events:auto;
  animation:toast-in .28s cubic-bezier(.22,1,.36,1) both;
  direction:rtl;
}
.toast.hiding{animation:toast-out .25s ease forwards}
.toast-icon{
  flex-shrink:0;width:34px;height:34px;border-radius:8px;
  background:rgba(240,180,41,.12);
  display:grid;place-items:center;
  font-size:17px;margin-top:1px;
}
.toast-body{flex:1}
.toast-title{
  font-size:12.5px;font-weight:700;color:var(--gold);
  letter-spacing:.3px;margin-bottom:4px;
}
.toast-msg{
  font-size:11.5px;color:var(--t2);line-height:1.55;
}
.toast-formats{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;
}
.toast-fmt{
  font-size:10px;font-family:var(--mono);font-weight:700;
  background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.22);
  color:var(--gold);border-radius:4px;padding:2px 7px;letter-spacing:.5px;
}
@keyframes toast-in{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}
@keyframes toast-out{
  from{opacity:1;transform:translateY(0)    scale(1)}
  to  {opacity:0;transform:translateY(10px) scale(.96)}
}