﻿:root{--ink:#13140F;--paper:#F4F1EA;--paper2:#ECE6D9;--card:#FBF9F4;--line:#DDD6C8;--copper:#C9A45C;--copper2:#E7C47A;--moss:#4F6B4A;--brick:#A8442A;--muted:#6B675C;
  --serif:'Fraunces',Georgia,serif;--sans:'Be Vietnam Pro',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans)}
a{color:var(--moss)}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:clamp(22px,4vw,40px) 0 18px}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--copper);margin:0 0 10px}
h1{font:600 clamp(30px,4vw,46px)/1.05 var(--serif);margin:0 0 8px}
.lead{margin:0;color:var(--muted);max-width:560px}
.bal{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.bal-k{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bal-v{font:600 24px var(--serif);font-variant-numeric:tabular-nums}.bal-v.sm-t{font:500 13px var(--sans);color:var(--muted)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:16px}
.tab{font:500 14px var(--sans);padding:10px 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.tab.active{color:var(--ink);border-color:var(--ink)}
.tab.soon{cursor:default;opacity:.7;margin-left:auto}.tab.soon em{font:500 10px var(--mono);font-style:normal;background:var(--paper2);padding:2px 6px;border-radius:999px;margin-left:4px}
.cnt{font:500 11px var(--mono);background:var(--paper2);border-radius:999px;padding:1px 7px;margin-left:2px}.cnt:empty{display:none}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:18px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin:0 0 16px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
h2{font:600 20px/1.3 var(--serif);margin:0 0 10px}.card-h h2{margin:0}
.sticky{position:sticky;top:12px}
.muted{color:var(--muted)}.small{font-size:13px}.err-t{color:var(--brick)}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:#3B3A33}
input,select,textarea{font:15px var(--sans);padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;min-width:0}
textarea{resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus,[contenteditable]:focus{outline:2px solid var(--copper);border-color:var(--copper)}
.title-in{margin-bottom:8px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.btn{font:600 14px var(--sans);border-radius:8px;padding:9px 15px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn.primary{background:var(--ink);color:var(--paper)}.btn.primary:hover{background:#2a2b24}
.btn.ghost{border-color:var(--line);background:#fff}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.big{height:52px;font-size:16px;border-radius:10px}.wide{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.on{background:var(--copper);border-color:var(--copper);color:var(--ink)}
.bulk{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;align-items:end;padding:12px;background:var(--paper2);border-radius:10px;margin-bottom:12px}
.bulk label:first-child{grid-column:span 2}
.sents{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto}
.sent{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px}
.s-top{display:flex;gap:10px;align-items:flex-start}
.chk{flex-direction:row;align-items:center;gap:6px;font:500 12px var(--mono);color:var(--muted);padding-top:3px}.chk input{width:auto}
.s-text{flex:1;min-width:0;line-height:1.6;padding:2px 4px;border-radius:6px;border:1px solid transparent}
.s-text:hover{border-color:var(--line)}
.s-ctl{display:grid;grid-template-columns:minmax(0,1fr) 78px 70px auto auto;gap:6px;align-items:center;margin-top:8px}
.s-ctl select{padding:6px 8px;font-size:13px}
.s-len{font:500 11px var(--mono);min-width:32px;text-align:right}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;min-width:0}
.kpi b{display:block;font:600 18px var(--serif);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.kpi span{font:500 10px var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.msg{min-height:1.2em;margin:8px 0 0;font-size:14px}.msg.err{color:var(--brick)}.msg.ok{color:var(--moss)}
.progress{height:10px;background:var(--paper2);border-radius:999px;overflow:hidden;margin-top:10px}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--moss),var(--copper));transition:width .4s}
.result{margin-top:12px;padding:12px;border:1px solid #CFDCCB;background:#EEF3EC;border-radius:10px}.result audio{width:100%}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:10px;margin-bottom:14px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.vcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px}
.vav{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;font:600 18px var(--serif);background:#F3E6CC;color:#7A5A1E}.vav.male{background:#DCE5D8;color:var(--moss)}
.vinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.vinfo span{font-size:12px;color:var(--muted)}
.tags{display:flex;gap:4px;flex-wrap:wrap}.tags i{font:500 10px var(--mono);font-style:normal;background:var(--paper2);padding:2px 6px;border-radius:999px;color:var(--muted)}.tags i.hi{background:#F6EEDB;color:#7A5A1E}
.vact{display:flex;flex-direction:column;gap:6px}
.hlist{list-style:none;margin:0;padding:0}
.hlist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.hlist li:first-child{border-top:0}
.h-main{display:flex;flex-direction:column;gap:2px;min-width:0}.h-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-act{display:flex;gap:6px;flex-wrap:wrap}
.st{font:500 11px var(--mono);padding:3px 8px;border-radius:999px;background:var(--paper2);white-space:nowrap}.st.done{background:#DCE8D8;color:#2f4a2b}.st.failed{background:#F3D6CC;color:var(--brick)}.st.running,.st.merging{background:#F4E7C6}
.empty{text-align:center;padding:30px 10px}
.foot{color:var(--muted);font:12px var(--mono);padding:10px 0 40px}
#toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;z-index:50}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){.cols{grid-template-columns:1fr}.sticky{position:static}.sents{max-height:none}}
@media (max-width:560px){.card{padding:14px}.tab{padding:9px 10px;font-size:13px}.tab.soon{margin-left:0}
  .s-ctl{grid-template-columns:1fr 1fr auto}.s-ctl .s-voice{grid-column:1/-1}.s-len{display:none}
  .bulk label:first-child{grid-column:auto}
  .hlist li{grid-template-columns:1fr auto}.h-act{grid-column:1/-1}.bal{width:100%;justify-content:space-between}}
.mbar{display:none}
@media (max-width:900px){.mbar:not([hidden]){display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:20;justify-content:space-between;align-items:center;gap:10px;background:var(--ink);color:var(--paper);padding:8px 8px 8px 14px;border-radius:12px;font:500 13px var(--sans);box-shadow:0 6px 20px rgba(0,0,0,.18)}.mbar .btn{background:var(--copper2);color:var(--ink);border-color:var(--copper2)}main.wrap{padding-bottom:70px}}
