/* Sector-page demo component — self-contained, matches the site's dark app-window aesthetic.
   Driven by window.SECTOR_DEMO (see assets/js/sector-demo.js). Cannot affect the homepage demo.
   Multi-scene: audio-drop, document-drop, streaming, refine — tailored per industry vertical. */
.sd-wrap{max-width:760px;margin:34px auto 0}
.sd-win{background:#0f0c1d;border:1px solid rgba(155,43,226,.28);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(90,43,224,.5)}
.sd-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06)}
.sd-tl{width:11px;height:11px;border-radius:50%;display:inline-block}
.sd-tl.r{background:#ff5f57}.sd-tl.y{background:#febc2e}.sd-tl.g{background:#28c840}
.sd-state{margin-left:8px;font-size:12.5px;font-weight:600;color:#c9c2e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-spacer{flex:1}
.sd-chip{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:rgba(155,43,226,.16);
  color:#c9a8ff;border:1px solid rgba(155,43,226,.3);white-space:nowrap}
.sd-chip.dir{background:rgba(40,200,64,.12);color:#7fe39a;border-color:rgba(40,200,64,.28)}

/* Scene selector tabs — shows visitors exactly which capabilities are relevant to THIS industry */
.sd-scenes{display:flex;gap:6px;padding:10px 14px 0;flex-wrap:wrap}
.sd-scene-tab{font-size:12px;font-weight:600;padding:6px 12px;border-radius:9px;background:transparent;
  color:#8a83ad;border:1px solid rgba(255,255,255,.08);cursor:default;transition:all .3s ease}
.sd-scene-tab.on{background:rgba(155,43,226,.14);color:#e6dcff;border-color:rgba(155,43,226,.4)}

.sd-body{position:relative;min-height:260px}
.sd-scene{padding:18px}

/* ---- Dropzone (audio / document) ---- */
.sd-dz{border:2px dashed rgba(155,43,226,.3);border-radius:14px;padding:26px 18px;text-align:center;
  transition:border-color .3s ease,background .3s ease;position:relative;min-height:150px;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.sd-dz.active{border-color:rgba(155,43,226,.75);background:rgba(155,43,226,.06)}
.sd-dz-icon{font-size:30px;opacity:.55;margin-bottom:8px}
.sd-dz-label{font-size:13.5px;color:#8a83ad}
.sd-file{position:absolute;left:50%;top:-46px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  background:#191527;border:1px solid rgba(155,43,226,.35);border-radius:10px;padding:8px 14px;
  font-size:12.5px;color:#e6dcff;box-shadow:0 10px 26px -10px rgba(0,0,0,.5);opacity:0;
  transition:top 1.1s cubic-bezier(.22,1,.36,1),opacity .5s ease}
.sd-file.drop{top:calc(50% - 14px);opacity:1}
.sd-file.settle{opacity:0;transition:opacity .4s ease}

/* ---- Document result card (dual-language + export) ---- */
.sd-doccard{border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.sd-docmeta{font-size:11.5px;color:#8a83ad;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.sd-doc-panes{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:560px){.sd-doc-panes{grid-template-columns:1fr}}
.sd-doc-pane{padding:14px}
.sd-doc-pane+.sd-doc-pane{border-left:1px solid rgba(255,255,255,.06)}
@media(max-width:560px){.sd-doc-pane+.sd-doc-pane{border-left:0;border-top:1px solid rgba(255,255,255,.06)}}
.sd-exports{display:flex;gap:8px;padding:10px 14px;flex-wrap:wrap}
.sd-export-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:7px;background:rgba(127,227,154,.12);
  color:#7fe39a;border:1px solid rgba(127,227,154,.28)}

/* ---- Streaming captions (live lecture) ---- */
.sd-live-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#ff8a8a;margin-bottom:12px}
.sd-live-dot{width:7px;height:7px;border-radius:50%;background:#ff5f57;animation:sdPulse 1.4s ease-in-out infinite}
@keyframes sdPulse{50%{opacity:.35;transform:scale(.8)}}
.sd-cap-list{display:flex;flex-direction:column;gap:10px;min-height:150px}
.sd-cap-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease}
.sd-cap-row.in{opacity:1;transform:none}
@media(max-width:560px){.sd-cap-row{grid-template-columns:1fr}}
.sd-cap-en,.sd-cap-tg{font-size:14px;line-height:1.4;color:#d9d4ec}
.sd-cap-tg.rtl{direction:rtl;text-align:right}

/* ---- Refine Studio (raw -> polished -> translated) ---- */
.sd-refine-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sd-refine-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.sd-refine-badge.raw{background:rgba(255,255,255,.06);color:#8a83ad}
.sd-refine-badge.polished{background:rgba(155,43,226,.16);color:#c9a8ff}
.sd-refine-text{font-size:15.5px;line-height:1.5;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);min-height:44px}
.sd-refine-text.strike{color:#6b6485;text-decoration:line-through;text-decoration-color:rgba(255,95,87,.5)}
.sd-refine-text.good{color:#ece9f6;border-color:rgba(155,43,226,.28)}

/* ---- Bilingual reveal panes (audio-drop end state) ---- */
.sd-panes{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;border-radius:12px;
  border:1px solid rgba(255,255,255,.06);overflow:hidden;background:rgba(255,255,255,.02)}
@media(max-width:560px){.sd-panes{grid-template-columns:1fr}.sd-swap{display:none}}
.sd-pane{padding:16px}
.sd-pane+.sd-pane{border-left:1px solid rgba(255,255,255,.06)}
@media(max-width:560px){.sd-pane+.sd-pane{border-left:0;border-top:1px solid rgba(255,255,255,.06)}}
.sd-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a83ad;margin-bottom:10px}
.sd-swap{display:grid;place-items:center;padding:0 8px;color:#7c74a3;font-size:18px}
.sd-txt{font-size:16.5px;line-height:1.5;color:#ece9f6;min-height:48px}
.sd-txt.rtl{direction:rtl;text-align:right;font-size:17.5px}
.sd-foot{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.02);
  border-top:1px solid rgba(255,255,255,.06)}
.sd-play{color:#c9a8ff;font-size:12px}
.sd-track{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.sd-prog{height:100%;width:0;background:linear-gradient(90deg,#5A2BE0,#9B2BE2);transition:width .12s linear}
.sd-count{font-size:11.5px;color:#8a83ad;font-variant-numeric:tabular-nums}
.sd-cursor::after{content:'▌';color:#9B2BE2;animation:sdBlink 1s steps(2) infinite}
@keyframes sdBlink{50%{opacity:0}}
.sd-note{text-align:center;font-size:12px;color:#8a83ad;margin-top:12px}

/* ---- Classroom capture: live lecture w/ translated caption HUD -> Notes window slides up -> screenshot captured into Notes ---- */
.sd-classroom{position:relative;border-radius:12px;overflow:hidden;min-height:230px;
  background:radial-gradient(120% 100% at 30% 15%,#3a2f5e,#241c42 45%,#120e28 100%)}
.sd-cr-badge{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);padding:4px 9px;border-radius:20px;z-index:2}
.sd-cr-dot{width:6px;height:6px;border-radius:50%;background:#ff5f57;animation:sdPulse 1.4s ease-in-out infinite}
.sd-cr-stage{position:absolute;top:34px;left:0;right:0;bottom:88px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;z-index:1}
.sd-cr-avbox{position:relative;width:76px;height:76px}
.sd-cr-av{width:100%;height:100%;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#5A2BE0,#9B2BE2);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -4px rgba(90,43,224,.65)}
.sd-cr-av img,.sd-cr-av video{width:100%;height:100%;object-fit:cover;display:block}
.sd-cr-av svg{width:36px;height:36px;fill:#fff;opacity:.95}
.sd-cr-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(155,43,226,.55);
  animation:sdSpeakRing 1.7s ease-out infinite}
.sd-cr-ring.r2{animation-delay:.55s}
@keyframes sdSpeakRing{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.32);opacity:0}}
.sd-cr-name{font-size:11px;font-weight:700;color:#e6dcff;background:rgba(0,0,0,.34);padding:3px 11px;border-radius:20px}
.sd-cr-bars{display:flex;align-items:flex-end;gap:2.5px;height:13px}
.sd-cr-bars span{width:3px;background:#c9a8ff;border-radius:2px;animation:sdBar .9s ease-in-out infinite;height:4px}
.sd-cr-bars span:nth-child(1){animation-delay:0s}.sd-cr-bars span:nth-child(2){animation-delay:.15s}
.sd-cr-bars span:nth-child(3){animation-delay:.3s}.sd-cr-bars span:nth-child(4){animation-delay:.1s}
@keyframes sdBar{0%,100%{height:4px}50%{height:13px}}
.sd-cr-hud{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(10,8,22,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:10px 12px;z-index:2;transition:opacity .3s ease}
.sd-cr-en{font-size:12.5px;color:#e6dcff;line-height:1.4;min-height:17px}
.sd-cr-tg{font-size:12.5px;color:#c9a8ff;line-height:1.4;margin-top:5px;min-height:17px}
.sd-cr-tg.rtl{direction:rtl;text-align:right}
.sd-notes-win{position:absolute;left:6%;right:6%;bottom:-100%;background:#191527;
  border:1px solid rgba(255,255,255,.14);border-radius:12px 12px 0 0;
  box-shadow:0 -16px 44px -8px rgba(0,0,0,.55);transition:bottom .55s cubic-bezier(.22,1,.36,1);z-index:5}
.sd-notes-win.up{bottom:0}
.sd-notes-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.sd-notes-title{font-size:11.5px;font-weight:700;color:#c9c2e6}
.sd-notes-cam{margin-left:auto;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#5A2BE0,#9B2BE2);display:grid;place-items:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.18),0 4px 14px -2px rgba(155,43,226,.7);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.sd-notes-cam.pulse{transform:scale(1.22)}
.sd-notes-cam svg{width:16px;height:16px;fill:#fff}
.sd-notes-body{padding:12px;min-height:96px}
.sd-notes-hint{font-size:12px;color:#6b6485}
.sd-notes-shot{border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  opacity:0;transform:scale(.94);transition:opacity .45s ease,transform .45s ease}
.sd-notes-shot.in{opacity:1;transform:none}
/* Mirrors the LIVE .sd-classroom composition exactly (centred avatar top, full-width caption bar
   bottom, same text alignment) — so the "captured" thumbnail genuinely matches what was on screen,
   not a different arrangement. */
.sd-notes-shot-img{position:relative;height:108px;
  background:radial-gradient(120% 140% at 30% 15%,#3a2f5e,#241c42 45%,#120e28 100%)}
.sd-notes-shot-av{position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.sd-notes-shot-av img{width:100%;height:100%;object-fit:cover;display:block}
.sd-notes-shot-cc{position:absolute;left:6px;right:6px;bottom:6px;
  background:rgba(10,8,22,.68);border-radius:6px;padding:5px 7px}
.sd-notes-shot-en{font-size:8.5px;color:#e6dcff;line-height:1.35}
.sd-notes-shot-tg{font-size:8.5px;color:#c9a8ff;line-height:1.35;margin-top:2px}
.sd-notes-shot-tg.rtl{direction:rtl;text-align:right}
.sd-notes-shot-cap{font-size:10.5px;color:#8a83ad;padding:6px 9px}
.sd-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:10}
.sd-flash.on{opacity:.9;transition:opacity .06s ease}
.sd-flash:not(.on){transition:opacity .5s ease}
@media(prefers-reduced-motion:reduce){.sd-cursor::after{animation:none}.sd-prog{transition:none}.sd-file{transition:opacity .3s ease}.sd-cap-row{transition:none}.sd-cr-dot{animation:none}.sd-notes-win{transition:none}.sd-notes-cam{transition:none}.sd-notes-shot{transition:none}.sd-cr-ring{animation:none;opacity:0}.sd-cr-bars span{animation:none;height:8px}}