/* ============================================================
   VERSA — studio console for sound
   Warm-dark editorial workstation. Ink + amber + teal duotone.
   ============================================================ */

:root{
  --ink:        #14110d;   /* deep warm charcoal */
  --ink-2:      #1c1814;   /* raised surface */
  --ink-3:      #25201a;   /* card */
  --line:       #3a322a;   /* hairline */
  --line-soft:  #2c2620;
  --paper:      #f4ead8;   /* warm bone text */
  --paper-dim:  #b6a890;
  --paper-faint:#8a7e6c;
  --amber:      #f0a93b;   /* signal amber */
  --amber-deep: #d8852a;
  --teal:       #4fd6c4;   /* electric teal */
  --teal-deep:  #2fa392;
  --rose:       #e8736b;   /* alert */
  --green:      #8fce6b;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Schibsted Grotesk", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --r: 4px;
  --maxw: 1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(240,169,59,.10), transparent 60%),
    radial-gradient(900px 600px at -5% 12%, rgba(79,214,196,.07), transparent 55%),
    var(--ink);
  color:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}
::selection{ background:var(--amber); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:var(--mono); font-feature-settings:"tnum"; }
.accent{ color:var(--amber); }

/* grain overlay */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* back link */
.back-link{
  position:fixed; left:18px; bottom:18px; z-index:60;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  padding:8px 12px; border:1px solid var(--line);
  background:rgba(20,17,13,.82); backdrop-filter:blur(8px);
  border-radius:999px; color:var(--paper-dim);
  transition:.2s;
}
.back-link:hover{ color:var(--ink); background:var(--amber); border-color:var(--amber); }

/* ===================== APP BAR ===================== */
.appbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:28px;
  padding:14px clamp(18px,4vw,40px);
  background:linear-gradient(180deg, rgba(20,17,13,.96), rgba(20,17,13,.78));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:baseline; gap:9px; }
.brand-mark{ display:inline-flex; align-items:flex-end; gap:2px; height:18px; align-self:center; }
.brand-mark .bar{ width:3px; background:var(--amber); border-radius:2px; animation:eq 1.1s ease-in-out infinite; }
.brand-mark .b1{ height:7px; animation-delay:0s }
.brand-mark .b2{ height:16px; background:var(--teal); animation-delay:.18s }
.brand-mark .b3{ height:11px; animation-delay:.36s }
.brand-mark .b4{ height:14px; background:var(--teal); animation-delay:.54s }
@keyframes eq{ 0%,100%{ transform:scaleY(.5) } 50%{ transform:scaleY(1) } }
.brand-name{ font-family:var(--serif); font-weight:600; font-size:23px; letter-spacing:-.01em; }
.brand-sub{ font-family:var(--mono); font-size:11px; color:var(--paper-faint); text-transform:uppercase; letter-spacing:.18em; }

.appnav{ display:flex; gap:6px; margin-left:auto; }
.appnav a{
  font-size:14px; font-weight:500; color:var(--paper-dim);
  padding:7px 13px; border-radius:999px; position:relative; transition:.18s;
}
.appnav a:hover{ color:var(--paper); }
.appnav a.is-active{ color:var(--ink); background:var(--paper); }

.appbar-right{ display:flex; align-items:center; gap:11px; }
.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(143,206,107,.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(143,206,107,.5) } 70%{ box-shadow:0 0 0 7px rgba(143,206,107,0) } 100%{ box-shadow:0 0 0 0 rgba(143,206,107,0) } }
.appbar-meta{ font-family:var(--mono); font-size:11px; color:var(--paper-faint); }
.avatar{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  background:linear-gradient(135deg,var(--amber),var(--amber-deep)); color:var(--ink);
}
@media(max-width:720px){ .appbar-meta,.status-dot{ display:none } .appnav{ gap:0 } .appnav a{ padding:7px 9px; font-size:13px } }

/* ===================== SCREENS ===================== */
.screen{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,40px); }
.screen[hidden]{ display:none; }
.screen{ animation:screenIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes screenIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.eyebrow{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin:0 0 14px; }
.eyebrow-dash{ width:26px; height:1px; background:var(--teal); }

/* ===================== HERO ===================== */
.hero{ padding:clamp(48px,8vw,96px) 0 40px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:center; }
@media(max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }

.display{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(2.6rem,6.6vw,5.2rem); line-height:.98; letter-spacing:-.025em;
  margin:0 0 26px;
}
.display em{ font-style:italic; color:var(--amber); font-weight:420; }
.lede{ font-size:clamp(1.02rem,1.6vw,1.22rem); color:var(--paper-dim); max-width:50ch; margin:0 0 30px; }

.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:42px; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:.2s; line-height:1;
}
.btn-primary{ background:var(--amber); color:var(--ink); box-shadow:0 10px 30px -10px rgba(240,169,59,.5); }
.btn-primary:hover{ background:#ffc05a; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--paper-dim); background:rgba(244,234,216,.04); }
.btn.block{ display:flex; justify-content:center; width:100%; margin-top:8px; }

.hero-stats{ display:flex; gap:38px; margin:0; padding-top:26px; border-top:1px solid var(--line-soft); flex-wrap:wrap; }
.hero-stats div{ display:flex; flex-direction:column; }
.hero-stats dt{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-faint); }
.hero-stats dd{ margin:4px 0 0; font-family:var(--serif); font-size:2rem; line-height:1; }

/* hero panel */
.hero-panel{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line); border-radius:14px; padding:18px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.panel-tag{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--teal); display:inline-flex; align-items:center; gap:7px; }
.panel-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); }
.panel-id{ font-size:12px; color:var(--paper-faint); }
.mini-queue{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.mini-queue li{ display:grid; grid-template-columns:1fr 70px auto; align-items:center; gap:12px; }
.mq-name{ font-size:13px; color:var(--paper-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mq-bar{ height:5px; background:var(--ink); border-radius:99px; overflow:hidden; border:1px solid var(--line-soft); }
.mq-bar i{ display:block; height:100%; width:var(--p); background:linear-gradient(90deg,var(--amber-deep),var(--amber)); border-radius:99px; transition:width .8s; }
.mq-state{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; }
.mq-state.done{ color:var(--green) } .mq-state.run{ color:var(--amber) } .mq-state.queue{ color:var(--paper-faint) }
.panel-foot{ display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:11px; color:var(--paper-faint); }
.spark{ display:inline-flex; align-items:flex-end; gap:2px; height:20px; flex:1; }
.spark b{ flex:1; background:var(--teal-deep); border-radius:1px; animation:spark 1.4s ease-in-out infinite; }
.spark b:nth-child(odd){ background:var(--teal) }
.spark b:nth-child(1){animation-delay:0s}.spark b:nth-child(2){animation-delay:.1s}.spark b:nth-child(3){animation-delay:.2s}.spark b:nth-child(4){animation-delay:.3s}.spark b:nth-child(5){animation-delay:.4s}.spark b:nth-child(6){animation-delay:.5s}.spark b:nth-child(7){animation-delay:.6s}.spark b:nth-child(8){animation-delay:.7s}.spark b:nth-child(9){animation-delay:.8s}.spark b:nth-child(10){animation-delay:.9s}.spark b:nth-child(11){animation-delay:1s}.spark b:nth-child(12){animation-delay:1.1s}
@keyframes spark{ 0%,100%{ height:20% } 50%{ height:100% } }

/* ===================== BANDS ===================== */
.band{ padding:54px 0; }
.band-rule{ display:flex; align-items:center; gap:16px; margin-bottom:34px; }
.band-rule::after{ content:""; flex:1; height:1px; background:var(--line); }
.band-rule span{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-faint); }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.step{ padding:26px 22px; border-right:1px solid var(--line); transition:.25s; }
.step:last-child{ border-right:none; }
.step:hover{ background:var(--ink-2); }
.step-num{ font-size:13px; color:var(--amber); display:block; margin-bottom:18px; }
.step h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; margin:0 0 8px; }
.step p{ margin:0; font-size:14px; color:var(--paper-dim); }
@media(max-width:840px){ .steps{ grid-template-columns:1fr 1fr } .step:nth-child(2){ border-right:none } .step{ border-bottom:1px solid var(--line) } }
@media(max-width:520px){ .steps{ grid-template-columns:1fr } .step{ border-right:none } }

/* pricing */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:840px){ .tiers{ grid-template-columns:1fr } }
.tier{ background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:26px; position:relative; }
.tier-feature{ border-color:var(--amber); background:linear-gradient(180deg,rgba(240,169,59,.07),var(--ink-2)); box-shadow:0 24px 60px -34px rgba(240,169,59,.4); }
.tier-flag{ position:absolute; top:-11px; left:26px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; background:var(--amber); color:var(--ink); padding:4px 10px; border-radius:99px; }
.tier-name{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0 0 8px; }
.tier-price{ font-family:var(--serif); font-size:2.4rem; margin:0 0 18px; display:flex; align-items:baseline; gap:8px; }
.tier-price small{ font-family:var(--sans); font-size:.78rem; color:var(--paper-faint); font-weight:500; }
.tier ul{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; }
.tier li{ font-size:14px; color:var(--paper-dim); padding-left:20px; position:relative; }
.tier li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border:1.5px solid var(--teal); border-radius:50%; }

.landing-foot{ padding:40px 0 90px; border-top:1px solid var(--line-soft); margin-top:30px; }
.landing-foot p{ margin:0; font-size:12px; color:var(--paper-faint); }
.landing-foot a{ color:var(--amber); }

/* ===================== WORK HEADS ===================== */
.work-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding:40px 0 26px; flex-wrap:wrap; }
.page-title{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4vw,3rem); line-height:1; margin:0; letter-spacing:-.02em; }
.page-title .mono{ font-size:.55em; color:var(--amber); }
.work-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.seg{ display:inline-flex; background:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:3px; }
.seg-btn{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--paper-dim); background:transparent; border:none; padding:7px 15px; border-radius:999px; cursor:pointer; transition:.18s; }
.seg-btn:hover{ color:var(--paper); }
.seg-btn.is-active{ background:var(--paper); color:var(--ink); }

/* ===================== KPIs ===================== */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px; }
@media(max-width:720px){ .kpis{ grid-template-columns:1fr 1fr } }
.kpi{ background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:18px; display:flex; flex-direction:column; gap:6px; }
.kpi-label{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--paper-faint); }
.kpi-val{ font-family:var(--serif); font-size:2.1rem; line-height:1; }
.kpi-trend{ font-size:12px; color:var(--paper-faint); }
.kpi-trend.up{ color:var(--green) } .kpi-trend.run{ color:var(--amber) }

/* ===================== PROJECT GRID ===================== */
.project-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; padding-bottom:80px; }
.pcard{ background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:20px; cursor:pointer; transition:.22s; text-align:left; color:inherit; font:inherit; display:flex; flex-direction:column; gap:14px; }
.pcard:hover{ border-color:var(--amber); transform:translateY(-3px); box-shadow:0 24px 50px -30px rgba(0,0,0,.7); }
.pcard:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.pcard-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.pcard-title{ font-family:var(--serif); font-weight:500; font-size:1.22rem; line-height:1.15; margin:0; }
.pcard-client{ font-size:12px; color:var(--paper-faint); margin:3px 0 0; }
.pbadge{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:4px 9px; border-radius:99px; white-space:nowrap; border:1px solid; }
.pbadge.active{ color:var(--amber); border-color:var(--amber); }
.pbadge.review{ color:var(--teal); border-color:var(--teal); }
.pbadge.done{ color:var(--green); border-color:var(--green); }
.pcard-meta{ display:flex; gap:18px; }
.pcard-meta div{ display:flex; flex-direction:column; }
.pcard-meta dt{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--paper-faint); }
.pcard-meta dd{ margin:3px 0 0; font-size:15px; font-weight:600; }
.pcard-langs{ display:flex; gap:5px; flex-wrap:wrap; }
.lchip{ font-family:var(--mono); font-size:10.5px; padding:3px 7px; border-radius:5px; background:var(--ink-3); border:1px solid var(--line-soft); color:var(--paper-dim); }
.lchip.more{ color:var(--amber); }
.pcard-prog{ height:6px; background:var(--ink); border:1px solid var(--line-soft); border-radius:99px; overflow:hidden; }
.pcard-prog i{ display:block; height:100%; background:linear-gradient(90deg,var(--teal-deep),var(--teal)); border-radius:99px; }
.pcard-foot{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--paper-faint); }

/* ===================== QUEUE ===================== */
.queue-stats{ display:grid; grid-template-columns:repeat(4,1fr) 1.6fr; gap:12px; margin-bottom:24px; }
@media(max-width:840px){ .queue-stats{ grid-template-columns:repeat(2,1fr) } .queue-stats .wide{ grid-column:1/-1 } }
.qstat{ background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:15px 16px; display:flex; flex-direction:column; gap:3px; }
.qstat-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--paper-faint); }
.qstat-val{ font-family:var(--serif); font-size:1.9rem; line-height:1; }
.qstat-unit{ font-size:11px; color:var(--paper-faint); }
.qstat.wide{ justify-content:center; }
.worker-lights{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.worker-lights b{ width:13px; height:13px; border-radius:3px; background:var(--line); transition:.3s; }
.worker-lights b.on{ background:var(--teal); box-shadow:0 0 8px rgba(79,214,196,.7); }
.worker-lights b.busy{ background:var(--amber); box-shadow:0 0 8px rgba(240,169,59,.7); }

.queue-table{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:80px; }
.qrow{ display:grid; grid-template-columns:1fr 70px 96px 1.4fr 130px; align-items:center; gap:16px; padding:13px 18px; border-bottom:1px solid var(--line-soft); }
.qrow:last-child{ border-bottom:none; }
.qhead{ background:var(--ink-3); }
.qhead span{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--paper-faint); }
.qbody-row{ font-size:14px; transition:background .2s; animation:rowIn .4s ease; }
.qbody-row:hover{ background:var(--ink-2); }
@keyframes rowIn{ from{ opacity:0; transform:translateX(-6px) } to{ opacity:1; transform:none } }
.qfile{ display:flex; align-items:center; gap:10px; white-space:nowrap; overflow:hidden; }
.qfile .ftype{ font-family:var(--mono); font-size:9px; padding:3px 5px; border-radius:4px; background:var(--ink-3); border:1px solid var(--line-soft); color:var(--paper-faint); text-transform:uppercase; }
.qfile .fname{ overflow:hidden; text-overflow:ellipsis; }
.qlang{ font-family:var(--mono); font-size:12px; color:var(--paper-dim); }
.qdur{ font-family:var(--mono); font-size:12px; color:var(--paper-dim); }
.qprog{ height:7px; background:var(--ink); border:1px solid var(--line-soft); border-radius:99px; overflow:hidden; position:relative; }
.qprog i{ display:block; height:100%; border-radius:99px; transition:width .9s linear; }
.qprog.transcribing i{ background:linear-gradient(90deg,var(--amber-deep),var(--amber)); }
.qprog.translating i{ background:linear-gradient(90deg,var(--teal-deep),var(--teal)); }
.qprog.done i{ background:var(--green); }
.qprog.queued i{ background:var(--line); }
.qstate{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.qstate .led{ width:7px; height:7px; border-radius:50%; flex:none; }
.qstate.transcribing{ color:var(--amber) } .qstate.transcribing .led{ background:var(--amber); animation:blink 1s infinite }
.qstate.translating{ color:var(--teal) } .qstate.translating .led{ background:var(--teal); animation:blink 1s infinite }
.qstate.done{ color:var(--green) } .qstate.done .led{ background:var(--green) }
.qstate.queued{ color:var(--paper-faint) } .qstate.queued .led{ background:var(--paper-faint) }
@keyframes blink{ 50%{ opacity:.25 } }
@media(max-width:760px){ .qrow{ grid-template-columns:1fr 86px; } .col-prog,.qprog,.qlang,.qdur,.qhead span:nth-child(2),.qhead span:nth-child(3),.qhead span:nth-child(4){ display:none } }

/* ===================== EDITOR ===================== */
.editor-head{ align-items:flex-end; }
.lang-pick{ display:flex; flex-direction:column; gap:4px; }
.lang-pick-label{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--paper-faint); }
.lang-fixed{ font-size:14px; padding:9px 13px; border:1px solid var(--line); border-radius:8px; background:var(--ink-2); display:flex; gap:8px; align-items:center; }
.lang-fixed .mono{ color:var(--paper-faint); font-size:12px; }
#targetLang{ font-family:var(--sans); font-size:14px; padding:9px 13px; border:1px solid var(--line); border-radius:8px; background:var(--ink-2); color:var(--paper); cursor:pointer; }
#targetLang:focus-visible{ outline:2px solid var(--teal); }

.editor-wrap{ display:grid; grid-template-columns:1fr 280px; gap:20px; padding-bottom:80px; }
@media(max-width:920px){ .editor-wrap{ grid-template-columns:1fr } }

.seg-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.seg-item{ display:grid; grid-template-columns:96px 1fr 1fr; gap:0; border-bottom:1px solid var(--line-soft); cursor:pointer; transition:.18s; }
.seg-item:last-child{ border-bottom:none; }
.seg-item:hover{ background:var(--ink-2); }
.seg-item.active{ background:rgba(240,169,59,.06); box-shadow:inset 3px 0 0 var(--amber); }
.seg-time{ padding:16px 14px; border-right:1px solid var(--line-soft); }
.seg-tc{ font-family:var(--mono); font-size:11px; color:var(--amber); display:block; }
.seg-spk{ font-family:var(--mono); font-size:10px; color:var(--paper-faint); margin-top:6px; display:inline-block; padding:2px 6px; border:1px solid var(--line); border-radius:4px; }
.seg-src{ padding:16px 16px; border-right:1px solid var(--line-soft); font-size:15px; color:var(--paper-dim); line-height:1.5; }
.seg-tgt{ padding:16px 16px; font-size:15px; line-height:1.5; outline:none; transition:.18s; position:relative; }
.seg-tgt:hover{ background:rgba(79,214,196,.04); }
.seg-tgt:focus{ background:rgba(79,214,196,.08); box-shadow:inset 0 0 0 1px var(--teal); border-radius:4px; }
.seg-tgt[contenteditable]:empty::before{ content:"—"; color:var(--paper-faint); }
.seg-colhead{ display:grid; grid-template-columns:96px 1fr 1fr; background:var(--ink-3); }
.seg-colhead span{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--paper-faint); padding:11px 14px; border-right:1px solid var(--line-soft); }
.seg-colhead span:last-child{ border-right:none; }
@media(max-width:620px){ .seg-item,.seg-colhead{ grid-template-columns:1fr } .seg-time{ border-right:none; display:flex; gap:12px; align-items:center; padding:10px 14px } .seg-spk{ margin-top:0 } .seg-src,.seg-tgt{ border-right:none } }

.editor-side{ display:flex; flex-direction:column; gap:14px; position:sticky; top:84px; align-self:start; }
.side-card{ background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:16px; }
.side-h{ font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--paper-faint); margin:0 0 12px; }
.side-time{ font-family:var(--mono); font-size:15px; color:var(--amber); margin:0 0 8px; }
.side-meta{ font-size:13px; color:var(--paper-dim); margin:0 0 12px; }
.conf-bar{ height:6px; background:var(--ink); border:1px solid var(--line-soft); border-radius:99px; overflow:hidden; }
.conf-bar i{ display:block; height:100%; width:var(--c); background:linear-gradient(90deg,var(--teal-deep),var(--teal)); border-radius:99px; transition:width .4s; }
.side-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.side-list li{ display:flex; justify-content:space-between; font-size:13px; color:var(--paper-dim); }
.side-list b{ color:var(--paper); }
.side-card.hint{ background:transparent; border-style:dashed; }
.side-card.hint p{ margin:0; font-size:13px; color:var(--paper-dim); line-height:1.5; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translate(-50%,140%); z-index:80;
  background:var(--paper); color:var(--ink); font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:999px; box-shadow:0 20px 50px -20px rgba(0,0,0,.6); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.toast.show{ transform:translate(-50%,0); }

@media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto } }