@font-face{font-family:"Yekan Bakh FaNum";font-style:normal;font-weight:400;font-display:swap;src:url(YekanBakhFaNum-Regular.ttf) format("truetype")}
@font-face{font-family:"Yekan Bakh FaNum";font-style:normal;font-weight:700;font-display:swap;src:url(YekanBakhFaNum-Bold.ttf) format("truetype")}
:root{--bg:#EDF0F6;--panel:#fff;--ink:#131B2E;--ink-2:#1E2942;--muted:#5B6577;--line:#D8DDE8;--brand:#2848E8;--brand-d:#1B33B8;--brand-t:#E6EBFF;--amber:#8F5A00;--amber-t:#FFF1D6;--ok:#0F7B55;--ok-t:#DDF4EA;--err:#B42318;--err-t:#FDE8E6;--r:14px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;direction:rtl;font-family:"Yekan Bakh FaNum",Tahoma,sans-serif;font-weight:400;font-size:15px;line-height:1.7;color:var(--ink);background:var(--bg);min-height:100vh}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:700}
input,button{font:inherit;color:inherit}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.ltr{direction:ltr;text-align:left;unicode-bidi:plaintext}

/* fields */
.field{display:block}
.field>span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.input{width:100%;height:46px;padding:0 14px;background:#fff;border:1.5px solid var(--line);border-radius:10px;transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:#9AA3B5}
.input:hover{border-color:#B9C1D3}
.input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-t)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s}
.btn:hover{background:var(--brand-d)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.7;cursor:progress}
.btn-quiet{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-quiet:hover{background:var(--bg)}
.btn-sm{height:36px;padding:0 14px;font-size:13px}
.spin{width:16px;height:16px;border:2px solid #ffffff66;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* alerts */
.alert{padding:10px 14px;border-radius:10px;background:var(--err-t);color:var(--err);font-size:14px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;
 background:
  radial-gradient(circle at 50% 42%,transparent 0 120px,#fff0 121px),
  repeating-radial-gradient(circle at 50% 42%,#DCE3F5 0 1.5px,transparent 1.5px 22px),
  var(--bg)}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:36px 32px 32px}
.login-card form{display:grid;gap:18px}
.login-brand{display:flex;justify-content:center;margin-bottom:18px}
.login-brand svg{width:52px;height:52px}
.login-card h1{font-size:24px;text-align:center}
.login-card .sub{color:var(--muted);text-align:center;margin:2px 0 22px}
.pw{position:relative}
.pw .input{padding-right:78px}
.pw button{position:absolute;top:6px;bottom:6px;right:6px;padding:0 12px;border:0;border-radius:8px;background:var(--bg);color:var(--muted);font-size:13px;cursor:pointer}
.pw button:hover{background:var(--brand-t);color:var(--brand-d)}
.login-foot{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)}

/* ---------- app shell ---------- */
.top{background:var(--ink);color:#fff}
.top-in{max-width:1080px;margin:auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand svg{width:28px;height:28px}
.who{display:flex;align-items:center;gap:14px;font-size:13px;color:#B6C0D8}
.who a{color:#fff;text-decoration:none;padding:4px 12px;border:1px solid #ffffff40;border-radius:99px}
.who a:hover{background:#ffffff1a}
.page{max-width:1080px;margin:auto;padding:28px 24px 56px}
.page-head{margin-bottom:22px}
.page-head h1{font-size:24px}
.page-head p{color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.stack{display:grid;gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card-t{font-size:16px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hint{font-size:13px;color:var(--muted);margin-top:12px}

/* source cards */
.kbps{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;background:var(--amber-t);color:var(--amber);font-size:13px;font-weight:700}
.kbps.cov{background:var(--brand-t);color:var(--brand-d)}
.drop{position:relative;display:flex;align-items:center;gap:14px;min-height:84px;padding:14px 16px;border:2px dashed #C3CBDC;border-radius:12px;background:#F8F9FC;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.drag{border-color:var(--brand);background:var(--brand-t)}
.drop:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-t)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-ic{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--brand)}
.drop-ic svg{width:22px;height:22px}
.drop-txt{min-width:0}
.drop-txt b{display:block;font-weight:700}
.drop-txt small{display:block;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop.has-file{border-style:solid;border-color:var(--ok);background:var(--ok-t)}
.drop.has-file .drop-ic{color:var(--ok)}
.drop-x{position:relative;z-index:2;margin-inline-start:auto;flex:none;height:32px;padding:0 12px;border:0;border-radius:8px;background:#fff;color:var(--err);font-size:13px;cursor:pointer}
.drop-x[hidden]{display:none}
.or{display:flex;align-items:center;gap:10px;margin:12px 0 8px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.cover-row{display:grid;grid-template-columns:1fr 112px;gap:14px;align-items:start}
.thumb{width:112px;height:112px;border-radius:12px;background:var(--bg) center/cover;border:1px solid var(--line)}

/* live preview */
.pv{position:sticky;top:20px}
.pv-cover{aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,var(--ink-2),var(--brand)) center/cover;display:grid;place-items:center;color:#ffffffb0;overflow:hidden}
.pv-cover svg{width:56px;height:56px}
.pv-name{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--bg);font-size:13px;word-break:break-all}
.pv-name small{display:block;color:var(--muted)}
.tags{margin:14px 0 0;display:grid;gap:0}
.tags div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.tags dt{color:var(--muted);flex:none}
.tags dd{margin:0;text-align:left;direction:ltr;word-break:break-all}
.submit{display:flex;align-items:center;justify-content:space-between;gap:16px}
.submit p{font-size:13px;color:var(--muted)}

/* ---------- result ---------- */
.done{max-width:720px;margin:auto}
.ok-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ok-ic{flex:none;width:48px;height:48px;border-radius:50%;background:var(--ok-t);color:var(--ok);display:grid;place-items:center}
.ok-ic.bad{background:var(--err-t);color:var(--err)}
.ok-ic svg{width:26px;height:26px}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.meta small{display:block;color:var(--muted);font-size:13px}
.meta b{font-weight:700;word-break:break-word}
.file-line{margin-top:14px;padding:10px 12px;background:var(--bg);border-radius:10px;font-size:13px}
.res{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.res:first-of-type{border-top:0}
.res .status{grid-column:1/-1;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-block;padding:0 10px;border-radius:99px;font-size:12px;background:var(--bg);color:var(--muted)}
.chip.ok{background:var(--ok-t);color:var(--ok)}
.chip.bad{background:var(--err-t);color:var(--err)}
.res .input{background:#F8F9FC;height:40px;font-size:13px}
details{margin-top:6px;font-size:12px;color:var(--err);width:100%}
details pre{margin:6px 0 0;white-space:pre-wrap;direction:ltr;text-align:left;font-family:inherit}
.actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.empty{text-align:center;color:var(--muted);padding:8px 0}

/* ---------- settings ---------- */
.who a.on{background:#ffffff26;border-color:#ffffff66}
.set{max-width:760px}
.set .card{display:block}
.set .field+.hint{margin-top:6px}
.sub-t{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
select.input{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6577' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 12px center/18px}
.field>span small{font-size:12px;color:#7B8498}
.methods{border:0;padding:0;margin:18px 0 0;display:grid;gap:10px}
.methods legend{padding:0;font-size:13px;color:var(--muted);margin-bottom:6px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:#B9C1D3}
.opt input{margin:5px 0 0;width:18px;height:18px;accent-color:var(--brand);flex:none}
.opt span{display:block}
.opt b{display:block;font-weight:700}
.opt small{display:block;color:var(--muted);font-size:13px}
.opt:has(input:checked){border-color:var(--brand);background:var(--brand-t)}
.opt:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:2px}
.host{display:grid;grid-template-columns:130px 1fr 1.4fr;gap:14px}
.form-foot{margin-top:22px;display:flex;justify-content:flex-start}
.notice{padding:10px 14px;margin-bottom:14px;border-radius:10px;background:var(--ok-t);color:var(--ok);font-size:14px}
.set .alert{margin-bottom:10px}
.warn{padding:12px 16px;border-radius:12px;background:var(--amber-t);color:var(--amber);font-size:14px}
@media (max-width:560px){.host{grid-template-columns:1fr}}

@media (max-width:880px){
 .layout{grid-template-columns:1fr}
 .pv{position:static;order:-1}
 .pv-cover{aspect-ratio:auto;height:120px}
 .pv-cover svg{width:36px;height:36px}
}
@media (max-width:560px){
 .login-card{padding:28px 20px}
 .two,.meta,.cover-row{grid-template-columns:1fr}
 .cover-row .thumb{order:-1}
 .submit{flex-direction:column;align-items:stretch}
 .who span{display:none}
 .res{grid-template-columns:1fr auto}
 .res .kbps{grid-column:1/-1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.vars{list-style:none;margin:8px 0 0;padding:10px 12px;background:var(--bg);border-radius:10px;font-size:13px;color:var(--muted);display:grid;gap:6px;text-align:left}
.vars code{font-family:ui-monospace,Menlo,Consolas,monospace;color:#2848E8;background:#fff;border:1px solid #E4E8F2;border-radius:6px;padding:1px 6px}

/* ---------- tabs + album ---------- */
.tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.tab{height:38px;padding:0 22px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.tab:hover{background:var(--bg);color:var(--ink)}
.tab.on{background:var(--brand);color:#fff}
[hidden]{display:none!important}
.count{margin-inline-start:auto;font-size:13px;font-weight:400;color:var(--muted)}
.tracks{display:grid;gap:12px}
.trk{padding:14px;background:#F8F9FC;border-radius:12px}
.trk-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand-t);color:var(--brand-d);display:grid;place-items:center;font-size:13px;font-weight:700}
.trk-x{flex:none;width:34px;height:34px;border:0;border-radius:8px;background:#fff;color:var(--err);font-size:20px;line-height:1;cursor:pointer;border:1px solid var(--line)}
.trk-x:hover{background:var(--err-t)}
.trk-q{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q{display:grid;gap:8px;align-content:start}
.q .kbps{justify-self:start}
.drop.sm{min-height:64px;padding:10px 12px;gap:10px;background:#fff}
.drop.sm .drop-ic{width:36px;height:36px;border-radius:10px}
.drop.sm .drop-ic svg{width:18px;height:18px}
.drop.sm .drop-txt b{font-size:14px}
.input.sm{height:40px;font-size:13px}
.trk-tools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:14px}
.bulk{flex:1 1 280px;font-size:14px;color:var(--ink);margin-top:0;width:auto}
.bulk summary{cursor:pointer;color:var(--brand);padding:6px 0}
.bulk textarea.input{height:auto;padding:10px 14px;line-height:1.6;resize:vertical}
.zipopt{align-items:center}
.zipopt input{margin:0}
.trk-res{padding:12px 0;border-top:1px solid var(--line)}
.trk-res:first-of-type{border-top:0}
.trk-res-h{display:flex;align-items:center;gap:10px}
.trk-res .res{border-top:0;padding:8px 0 4px}
@media (max-width:560px){
 .trk-q{grid-template-columns:1fr}
 .tabs{display:flex}.tab{flex:1}
}