/* سرنا/پژواک — پنل آزمایش. تم روشن/تاریک خودکار. */
:root{
  --bg:#f6f7f9; --card:#ffffff; --ink:#15181d; --mut:#6b7280; --line:#e4e7ec;
  --acc:#0f766e; --acc2:#0d9488; --acc-ink:#ffffff; --warn:#b45309; --err:#b91c1c;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.18);
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1116; --card:#161a21; --ink:#e8eaed; --mut:#9aa2ad; --line:#262c36;
    --acc:#2dd4bf; --acc2:#14b8a6; --acc-ink:#04231f; --warn:#fbbf24; --err:#f87171;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* بدون این، display:flex روی .fld صفت hidden را بی‌اثر می‌کند */
html,body{margin:0;padding:0}
body{
  font-family:Vazirmatn,"Segoe UI",Tahoma,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.75;
  -webkit-text-size-adjust:100%;
}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--mut)}
.sm{font-size:.82rem}
.sep{color:var(--mut);opacity:.6;margin:0 .35em}

/* ── header ── */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:1000px;margin:0 auto;padding:1.4rem 1rem .6rem;
}
.brand{display:flex;align-items:center;gap:.7rem}
.logo{color:var(--acc2);display:flex}
h1{font-size:1.35rem;margin:0;font-weight:700;letter-spacing:-.01em}
.sub{margin:0;font-size:.8rem;color:var(--mut)}
.status{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--mut);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mut);flex:none}
.status.ok .dot{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.status.bad .dot{background:var(--err);box-shadow:0 0 0 3px rgba(185,28,28,.18)}

/* ── tabs ── */
.tabs{display:flex;gap:.25rem;max-width:1000px;margin:0 auto;padding:0 1rem;
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  font:inherit;font-size:.94rem;background:none;border:0;color:var(--mut);cursor:pointer;
  padding:.65rem .95rem;border-bottom:2px solid transparent;white-space:nowrap;border-radius:8px 8px 0 0;
}
.tab:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.tab.active{color:var(--ink);font-weight:700;border-bottom-color:var(--acc2)}

main{max-width:1000px;margin:0 auto;padding:1.1rem 1rem 2rem}
.pane{display:none}
.pane.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem;box-shadow:var(--shadow);margin-bottom:1rem}

/* ── dropzone ── */
.drop{
  border:2px dashed var(--line);border-radius:var(--r);padding:1.8rem 1rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;cursor:pointer;
  color:var(--mut);transition:.15s border-color,.15s background;
}
.drop:hover,.drop:focus-visible,.drop.over{border-color:var(--acc2);background:color-mix(in srgb,var(--acc2) 7%,transparent);outline:none}
.drop b{color:var(--ink);font-weight:500}
.finfo{margin-top:.9rem}
.frow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.frow b{font-weight:500;word-break:break-all}
audio{width:100%;height:38px}

/* ── form ── */
.grid{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
.fld{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--mut);min-width:190px}
.fld.grow{flex:1 1 260px}
.fld.inline{flex-direction:row;align-items:center;gap:.45rem}
.fld.inline input{width:70px}
select,input[type=text],input[type=number]{
  font:inherit;font-size:.92rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;width:100%;
}
select:focus,input:focus{outline:2px solid color-mix(in srgb,var(--acc2) 45%,transparent);outline-offset:1px;border-color:var(--acc2)}

.toggles{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.sw{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;cursor:pointer;user-select:none}
.sw input{position:absolute;opacity:0;width:0}
.sw span{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:.15s;flex:none}
.sw span::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;
  background:var(--card);transition:.15s}
.sw input:checked + span{background:var(--acc)}
.sw input:checked + span::after{transform:translateX(-16px)}
.sw input:focus-visible + span{outline:2px solid var(--acc2);outline-offset:2px}

button{font:inherit}
.primary{
  margin-inline-start:auto;background:var(--acc);color:var(--acc-ink);border:0;border-radius:10px;
  padding:.58rem 1.4rem;font-weight:700;font-size:.95rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;transition:.15s filter;
}
.primary:hover:not(:disabled){filter:brightness(1.08)}
.primary:disabled{opacity:.45;cursor:not-allowed}
.ghost{background:none;border:1px solid var(--line);color:var(--mut);border-radius:8px;
  padding:.25rem .6rem;cursor:pointer;font-size:.82rem}
.ghost:hover{color:var(--ink);border-color:var(--acc2)}
.spin{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.err{color:var(--err);font-size:.87rem;margin:.8rem 0 0}

/* ── results ── */
.results{display:grid;gap:1rem;grid-template-columns:1fr}
.results.cmp{grid-template-columns:1fr 1fr}
@media (max-width:760px){.results.cmp{grid-template-columns:1fr}}
.out{margin:0}
.outhead{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem}
.outhead b{font-weight:700}
.badge{font-size:.75rem;background:color-mix(in srgb,var(--acc2) 16%,transparent);color:var(--acc2);
  border-radius:999px;padding:.1rem .6rem;font-weight:500}
.transcript{
  margin:0;font-size:1.03rem;line-height:2.05;white-space:pre-wrap;word-break:break-word;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.85rem;min-height:3.4rem;
}
.tail{color:var(--mut);opacity:.72}
.metaline{margin:.55rem 0 0;font-size:.8rem;color:var(--mut);display:flex;gap:.9rem;flex-wrap:wrap}

/* ── live ── */
.livebar{display:flex;align-items:center;gap:1rem}
.mic{
  width:62px;height:62px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;transition:.15s;
}
.mic:hover{filter:brightness(1.08)}
.mic.rec{background:var(--err);color:#fff;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--err) 55%,transparent)}
  50%{box-shadow:0 0 0 12px transparent}}
.livemeta{flex:1;min-width:0}
.livestate{font-weight:500;margin-bottom:.35rem}
.meter{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc2),var(--warn));
  transition:width .08s linear}

/* ── tables ── */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:520px}
th,td{text-align:right;padding:.5rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--mut);font-weight:500;font-size:.8rem}
tbody tr:last-child td{border-bottom:0}
td.path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;direction:ltr;text-align:left;
  white-space:normal;word-break:break-all;color:var(--mut)}
td.k{font-weight:500}

footer{max-width:1000px;margin:0 auto;padding:1rem 1rem 2.4rem;font-size:.83rem;color:var(--mut);
  border-top:1px solid var(--line);text-align:center}

.seg{display:flex;gap:10px;align-items:flex-start;margin:6px 0;line-height:1.9}.spk{font-size:12px;font-weight:600;border:1px solid;border-radius:999px;padding:0 8px;white-space:nowrap;margin-top:6px}.segtime{font-size:11px;color:#888;min-width:3em;margin-top:8px;direction:ltr}.segtext{flex:1}

/* ── خروجی: کلمات با زمان، دکمه‌های دانلود، وضعیت درخواست‌ها ── */
.words{display:flex;flex-wrap:wrap;gap:.3rem}
.wchip{display:inline-flex;flex-direction:column;align-items:center;line-height:1.25;
  border:1px solid var(--line);border-radius:8px;padding:.15rem .45rem;background:var(--bg)}
.wchip b{font-weight:500}
.wchip i{font-style:normal;font-size:.68rem;color:var(--mut);font-variant-numeric:tabular-nums}
.dl{display:inline-flex;gap:.35rem;margin-inline-start:auto}
.dl a{border:1px solid var(--line);color:var(--mut);border-radius:8px;padding:.18rem .5rem;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.02em}
.dl a:hover{color:var(--ink);border-color:var(--acc2);text-decoration:none}
.jst{font-size:.8rem;border-radius:999px;padding:.1rem .55rem;border:1px solid var(--line);color:var(--mut)}
.jst.done{color:var(--acc2);border-color:var(--acc2)}
.jst.error{color:var(--err);border-color:var(--err)}
.jst.running,.jst.queued{color:var(--warn);border-color:var(--warn)}