@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Myanmar:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#070b14;--side:#0a101b;--panel:#0d1422;--panel2:#101a2c;--line:#1e2a3d;--text:#f4f1e9;--muted:#8995aa;--purple:#7655ff;--blue:#4779ff;--pink:#d840d5;--green:#37d08a}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0,#101a33 0,transparent 32%),var(--bg);color:var(--text);font-family:Inter,"Noto Sans Myanmar","Myanmar Text",sans-serif}button,input,select,textarea{font:inherit}a{text-decoration:none;color:inherit}.app{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:22px 14px;background:linear-gradient(180deg,#09111d,#080d16);border-right:1px solid var(--line);display:flex;flex-direction:column}.logo{display:flex;align-items:center;gap:10px;padding:2px 8px 24px}.logo-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 0 28px #6f50ff55}.logo b{font-size:15px;line-height:14px;display:inline-block}.logo span{font-size:10px;margin-left:6px;padding:3px 5px;border-radius:5px;background:#7655ff}.nav-title{font-size:10px;color:#66738a;margin:18px 8px 7px;font-weight:700}.nav{height:42px;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:9px;color:#aeb7c8;font-size:13px}.nav span{flex:1}.nav small{font-size:8px;color:#69758a}.nav.active{color:white;background:linear-gradient(90deg,#6846dc99,#4d5cbd55);border:1px solid #755cff}.nav.disabled{opacity:.68}.side-note{margin-top:auto;padding:12px;border:1px solid var(--line);border-radius:12px;background:#0e1625;display:flex;justify-content:space-between;font-size:11px;color:#9ca7ba}.back-home{margin-top:14px;padding:10px;color:#8f9bb0;font-size:12px}.shell{min-width:0}.top{height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #151f2e;background:#080d16aa;backdrop-filter:blur(14px);position:sticky;top:0;z-index:5}.top h1{font-size:19px;margin:0 0 3px}.top p{font-size:11px;color:var(--muted);margin:0}.badge{font-size:11px;color:#5cdda1;border:1px solid #244f42;background:#0d241e;padding:8px 11px;border-radius:999px}main{padding:24px 28px 40px;max-width:1500px;margin:auto}.welcome{min-height:360px;border:1px solid var(--line);border-radius:22px;padding:46px;display:grid;grid-template-columns:1.5fr .7fr;align-items:center;background:linear-gradient(135deg,#10182a,#0b1220 60%,#17102a);overflow:hidden}.eyebrow{font-size:10px;letter-spacing:.12em;color:#8e7bff;font-weight:800}.welcome h2{font-size:45px;line-height:1.04;margin:12px 0}.welcome h2 em{font-style:normal;background:linear-gradient(90deg,#836cff,#e653cf);-webkit-background-clip:text;color:transparent}.welcome p{max-width:650px;color:#8f9bb0;font-size:13px;line-height:1.7}.gradient-btn{display:inline-block;margin-top:14px;padding:13px 18px;border-radius:10px;background:linear-gradient(90deg,#664dff,#cc42ce);font-weight:700;font-size:12px}.welcome-art{display:flex;flex-direction:column;align-items:center;gap:8px;color:#aeb7c8}.orb{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;font-size:55px;background:radial-gradient(circle at 35% 30%,#8d73ff,#4e31a4 50%,#17102d 70%);box-shadow:0 0 80px #694cff66}.welcome-art b{color:white;margin-top:12px}.welcome-art span{font-size:11px}.section-head{margin:32px 0 14px}.section-head h2{margin:6px 0;font-size:22px}.workflow-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.mini-card{padding:18px 14px;border:1px solid var(--line);border-radius:14px;background:#0d1422;min-height:145px}.mini-card span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#172238;color:#76839a;font-size:11px;margin-bottom:18px}.mini-card b{font-size:13px}.mini-card p{font-size:10px;color:#77849a;line-height:1.5}.mini-card.live{border-color:#473c78}.mini-card.live span{background:linear-gradient(135deg,#7458ff,#a94ddb);color:white}.translator-main{padding-top:18px}.steps{height:86px;border:1px solid var(--line);border-radius:15px;background:#0b1220;display:flex;align-items:center;padding:0 22px;margin-bottom:14px}.step{display:flex;align-items:center;gap:9px;min-width:112px}.step i{font-style:normal;width:31px;height:31px;border:1px solid #344157;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#8793a7}.step b,.step span{display:block}.step b{font-size:11px}.step span{font-size:8px;color:#718096;margin-top:3px}.step.on i{border:0;color:white;background:linear-gradient(135deg,#7757ff,#a348d1);box-shadow:0 0 20px #7757ff66}.steps hr{flex:1;border:0;border-top:1px solid #293448;margin:0 14px}.studio-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px}.stack{display:flex;flex-direction:column;gap:14px;min-width:0}.panel{border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,#0e1625,#0b1220);padding:14px}.panel-title{display:flex;align-items:center;gap:7px;color:#879cff;font-size:10px;letter-spacing:.05em;margin-bottom:13px}.panel-title.split{justify-content:space-between}.panel-title.split>div{display:flex;gap:7px}.drop{height:205px;border:1px dashed #3a4c69;border-radius:11px;background:#0b111d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;cursor:pointer}.cloud{font-size:35px;color:#8668ff}.drop b{font-size:12px}.drop span{font-size:9px;color:#718096;max-width:90%;overflow-wrap:anywhere}.drop strong{margin-top:5px;padding:9px 15px;border-radius:8px;background:linear-gradient(90deg,#684dff,#a545d2);font-size:10px}.upload-btn{width:100%;margin-top:10px;border:1px solid #29364a;border-radius:9px;padding:10px;background:#111b2d;color:#c9d1de;cursor:pointer}.video-stage{height:min(60vh,610px);min-height:430px;background:#030508;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}.video-stage video{width:100%;height:100%;object-fit:contain}.empty-video{height:470px;border-radius:10px;background:#050911;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#758196}.empty-video div{font-size:38px;color:#7655ff}.empty-video b{color:#b6c0cf}.empty-video span{font-size:10px}.player{height:46px;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center}.player button{width:32px;height:32px;border:0;border-radius:8px;color:white;background:#6548d9;cursor:pointer}.player input{width:100%}.player span{font-size:10px;color:#8995aa}.filename{max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8490a4;font-size:9px}.field-label,.settings-row label{font-size:9px;color:#7f8ba0}.input{width:100%;height:37px;border:1px solid #26344a;border-radius:8px;background:#0a101b;color:#e9edf3;padding:0 10px;outline:0}.key-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin:6px 0 11px}.connected{display:flex;align-items:center;padding:0 9px;border-radius:8px;background:#0c261e;border:1px solid #1f4a3b;color:#46d99a;font-size:9px}.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-row label{display:flex;flex-direction:column;gap:5px}.analyze-btn{width:100%;margin-top:12px;min-height:58px;border:0;border-radius:10px;color:white;background:linear-gradient(90deg,#6350fa,#d33bc7);display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;box-shadow:0 8px 30px #773fc333}.analyze-btn span{font-size:20px}.analyze-btn b,.analyze-btn small{display:block}.analyze-btn b{font-size:12px}.analyze-btn small{font-size:8px;opacity:.7;margin-top:3px}.analyze-btn:disabled{opacity:.55}.progress-box{margin-top:10px;padding:10px;border:1px solid #29364b;border-radius:9px;display:flex;gap:9px;align-items:center}.progress-box b,.progress-box span{display:block}.progress-box b{font-size:10px}.progress-box span{font-size:9px;color:#7f8ba0;margin-top:3px}.spinner{width:22px;height:22px;border:3px solid #293448;border-top-color:#8568ff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}.results{display:grid;grid-template-columns:1fr 1fr;gap:14px}.result textarea{width:100%;height:260px;resize:vertical;border:1px solid #1d293b;border-radius:9px;background:#070c15;color:#e5e9ef;padding:11px;font-family:"Noto Sans Myanmar",sans-serif;font-size:11px;line-height:1.7;outline:0}.copy-button,.download-text{border:1px solid #2a3850;border-radius:7px;background:#121c2e;color:#aeb9c9;padding:6px 9px;font-size:9px;cursor:pointer}.download-text{width:100%;margin-top:8px;color:#c5bbff}.error-box{margin-top:8px;padding:9px;border:1px solid #5a2932;border-radius:8px;background:#251015;color:#ff929f;font-size:10px}
@media(max-width:1050px){.app{grid-template-columns:72px 1fr}.sidebar{padding:18px 8px}.logo>div:last-child,.nav span,.nav small,.nav-title,.side-note,.back-home{display:none}.logo{padding:0 6px 22px}.nav{justify-content:center;font-size:16px}.studio-grid{grid-template-columns:290px 1fr}.workflow-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.app{display:block}.sidebar{display:none}.top{padding:0 14px}.top .badge{display:none}main{padding:14px}.studio-grid{grid-template-columns:1fr}.steps{overflow-x:auto}.step{min-width:100px}.steps hr{min-width:20px}.video-stage{min-height:300px;height:52vh}.results{grid-template-columns:1fr}.welcome{grid-template-columns:1fr;padding:26px}.welcome h2{font-size:34px}.welcome-art{display:none}.workflow-cards{grid-template-columns:repeat(2,1fr)}}
/* v0.5 Subtitle Editor */
.subtitle-workspace{border-color:#493d78;background:linear-gradient(145deg,#10182a,#0b1220)}
.editor-badge{padding:4px 7px;border-radius:999px;background:#33275e;color:#b7a7ff;font-size:8px}
.subtitle-toolbar{display:grid;grid-template-columns:1fr 110px 120px;gap:8px;align-items:end;margin-bottom:10px}
.subtitle-toolbar label{display:flex;flex-direction:column;gap:5px;color:#8490a5;font-size:9px}
.switch-row{height:37px;flex-direction:row!important;align-items:center;gap:8px!important;padding:0 10px;border:1px solid #26344a;border-radius:8px;background:#0a101b;color:#c7d0df!important}
.switch-row input{accent-color:#7757ff}
.input.compact{height:37px}
.subtitle-preview-box{height:150px;position:relative;overflow:hidden;border:1px solid #1d293b;border-radius:9px;background:linear-gradient(135deg,#111827,#05080f);margin-bottom:10px}
.preview-label{position:absolute;left:9px;top:8px;color:#536078;font-size:7px;letter-spacing:.12em}
.subtitle-sample{position:absolute;left:4%;right:4%;text-align:center;color:white;font-family:"Myanmar Text","Noto Sans Myanmar",sans-serif;font-weight:700;line-height:1.35;text-shadow:0 2px 4px #000,0 0 4px #000;word-break:break-word}
.subtitle-sample.bottom{bottom:14px}.subtitle-sample.middle{top:50%;transform:translateY(-50%)}.subtitle-sample.top{top:22px}
.result textarea.editable-srt{height:310px}
.result-actions{display:grid;grid-template-columns:auto auto 1fr;gap:7px;margin-top:8px}
.result-actions .download-text{margin-top:0}
@media(max-width:760px){.subtitle-toolbar{grid-template-columns:1fr 1fr}.switch-row{grid-column:1/-1}}

/* v0.6 Live Subtitle Preview */
.subtitle-toolbar{
  grid-template-columns:1fr 92px 105px 92px;
}
.video-stage{
  position:relative;
}
.live-subtitle-overlay{
  position:absolute;
  left:6%;
  right:6%;
  z-index:3;
  text-align:center;
  color:#fff;
  font-family:"Myanmar Text","Noto Sans Myanmar",sans-serif;
  font-weight:700;
  line-height:1.28;
  white-space:pre-line;
  overflow-wrap:anywhere;
  text-shadow:
    0 2px 3px #000,
    0 0 3px #000,
    1px 1px 1px #000,
    -1px -1px 1px #000;
  pointer-events:none;
  transition:font-size .12s ease, top .12s ease, bottom .12s ease;
}
.live-subtitle-overlay.bottom{
  bottom:7%;
  top:auto;
  transform:none;
}
.live-subtitle-overlay.middle{
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
}
.live-subtitle-overlay.top{
  top:7%;
  bottom:auto;
  transform:none;
}
@media(max-width:900px){
  .subtitle-toolbar{
    grid-template-columns:1fr 1fr;
  }
}

/* v0.7 preview calibration + browser API-key memory */
.video-overlay-box{
  position:absolute;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.video-overlay-box .live-subtitle-overlay{
  left:5%;
  right:5%;
}
.clear-key-btn{
  height:37px;
  padding:0 10px;
  border:1px solid #35445c;
  border-radius:8px;
  background:#111a2a;
  color:#98a4b8;
  font-size:9px;
  cursor:pointer;
}
.clear-key-btn:hover{
  border-color:#735cff;
  color:#d4ccff;
}
.key-row{
  grid-template-columns:minmax(0,1fr) auto auto;
}

/* v0.8 one-click/manual + mobile + draggable subtitle */
.mode-switcher{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mode-card{min-height:70px;border:1px solid var(--line);border-radius:13px;background:#0b1220;color:#aeb7c8;display:flex;align-items:center;gap:11px;padding:12px;text-align:left;cursor:pointer}
.mode-card.active{border-color:#765cff;background:linear-gradient(90deg,#201a45,#101a2c)}
.mode-icon{width:38px;height:38px;border-radius:10px;background:#172238;display:grid;place-items:center;font-size:18px}
.mode-card.active .mode-icon{background:linear-gradient(135deg,#7155ff,#c442ce);color:white}.mode-card div{flex:1}.mode-card b,.mode-card small{display:block}.mode-card b{font-size:12px;color:#edf0f5}.mode-card small{font-size:9px;color:#7d899d;margin-top:4px}.mode-card i{font-style:normal;font-size:8px;padding:4px 6px;border-radius:999px;background:#15382d;color:#55dfa7}
.auto-flow-card{border:1px solid #2b2b56;border-radius:13px;background:linear-gradient(90deg,#10172a,#0d1321);padding:12px 15px;margin-bottom:12px}.auto-flow-title{display:flex;justify-content:space-between;color:#a99bff;font-size:10px}.auto-flow-steps{display:flex;align-items:center;gap:8px;margin-top:12px;overflow-x:auto}.auto-flow-steps>b{color:#344157}.auto-node{min-width:72px;text-align:center}.auto-node i{font-style:normal;width:25px;height:25px;margin:auto;display:grid;place-items:center;border-radius:50%;border:1px solid #344157;color:#748095;font-size:9px}.auto-node span{display:block;color:#7f8ba0;font-size:8px;margin-top:5px}.auto-node.done i{background:#2d7b5c;border-color:#3eaa7f;color:white}.auto-node.pause i{border-color:#d6a44d;color:#e9bc65}.auto-flow-card p{margin:9px 0 0;color:#68758a;font-size:8px}
.tiny-link{border:0;background:transparent;color:#806eff;font-size:8px;cursor:pointer}.api-saved-state{height:47px;border:1px solid #235343;border-radius:9px;background:#0b261e;display:flex;align-items:center;gap:9px;padding:8px 10px;margin-bottom:9px}.api-saved-state>span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#164b38;color:#54e1a5}.api-saved-state b,.api-saved-state small{display:block}.api-saved-state b{font-size:10px;color:#b9ead7}.api-saved-state small{font-size:8px;color:#5c9a83}.key-row{grid-template-columns:minmax(0,1fr) auto auto}
.subtitle-drag-hint{position:absolute;top:8px;right:8px;z-index:4;padding:5px 7px;border-radius:7px;background:#060912aa;color:#69758a;font-size:7px;pointer-events:none}.live-subtitle-overlay.free{width:min(90%,760px);user-select:none}
.manual-tools-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 28px 32px}.manual-tool{display:flex;align-items:center;gap:10px;min-height:66px}.manual-tool>span{font-size:20px;color:#8a72ff}.manual-tool div{flex:1}.manual-tool b,.manual-tool small{display:block}.manual-tool b{font-size:10px}.manual-tool small{font-size:8px;color:#77849a;margin-top:3px}
@media(max-width:760px){
 .top{height:60px}.top h1{font-size:16px}.translator-main{padding-top:10px}.steps{height:68px;padding:0 10px}.step{min-width:84px}.step span{display:none}.step i{width:27px;height:27px}
 .mode-switcher{grid-template-columns:1fr}.mode-card{min-height:62px}.studio-grid{display:flex;flex-direction:column}.studio-grid>.stack:first-child{order:2}.studio-grid>.stack:nth-child(2){order:1}
 .video-stage{height:auto;min-height:0;aspect-ratio:16/9}.video-stage video{max-height:62vh}.preview-card{padding:9px}.player{grid-template-columns:32px 1fr}.player span{grid-column:1/-1;text-align:right}
 .upload-panel,.analyze-card{padding:12px}.drop{height:145px}.results{grid-template-columns:1fr}.manual-tools-panel{grid-template-columns:1fr;margin:8px 8px 20px}
}
@media(max-width:430px){main{padding:8px}.mode-card i{display:none}.auto-flow-card{padding:10px}.auto-node{min-width:60px}.studio-grid,.stack{gap:8px}.video-stage{border-radius:8px}}

/* v0.9 subtitle drag clipping fix */
.video-overlay-box{
  overflow:visible;
}
.live-subtitle-overlay.free{
  width:auto;
  max-width:88%;
  min-width:120px;
  padding:3px 8px;
  box-sizing:border-box;
  white-space:pre-line;
  overflow:visible;
  overflow-wrap:anywhere;
  word-break:normal;
}
@media(max-width:760px){
  .live-subtitle-overlay.free{
    max-width:92%;
    min-width:80px;
    padding:2px 5px;
  }
}

/* v1.0 subtitle-editor/upload swap + sticky preview + one-click controller */
.one-click-start{
  width:100%;
  margin-top:11px;
  height:42px;
  border:0;
  border-radius:10px;
  background:linear-gradient(90deg,#664dff,#d13ac8);
  color:#fff;
  font-weight:800;
  font-size:11px;
  cursor:pointer;
  box-shadow:0 8px 26px #673ec533;
}
.one-click-note{
  margin-top:7px;
  color:#69778d;
  font-size:8px;
  line-height:1.5;
}
.auto-node.running i{
  border-color:#8469ff;
  color:white;
  background:#4931a9;
  box-shadow:0 0 18px #7655ff88;
}
.auto-node.waiting i{
  border-color:#5d687c;
}
.studio-grid.subtitle-editing{
  grid-template-columns:minmax(350px,430px) minmax(0,1fr);
  align-items:start;
}
.subtitle-editing #control-stack{
  min-width:0;
}
.subtitle-editing #subtitle-workspace{
  order:-10;
}
.subtitle-editing #results-panel{
  grid-template-columns:1fr 1fr;
}
.subtitle-editing #upload-panel{
  min-height:0;
}
.preview-card.preview-sticky{
  position:sticky;
  top:88px;
  z-index:2;
}
.editor-primary{
  border-color:#5c49a0;
  box-shadow:0 0 28px #6c4fff18;
}
.editor-primary .subtitle-preview-box{
  height:115px;
}
.editor-primary textarea.editable-srt{
  height:260px;
}
.subtitle-editing #upload-panel .drop{
  height:125px;
}
.subtitle-editing #upload-panel .cloud{
  font-size:25px;
}
@media(max-width:1000px){
  .studio-grid.subtitle-editing{
    grid-template-columns:330px minmax(0,1fr);
  }
}
@media(max-width:760px){
  .studio-grid.subtitle-editing{
    display:flex;
    flex-direction:column;
  }
  .preview-card.preview-sticky{
    position:relative;
    top:auto;
  }
  .subtitle-editing #preview-stack{
    order:1;
  }
  .subtitle-editing #control-stack{
    order:2;
  }
  .subtitle-editing #results-panel{
    grid-template-columns:1fr;
  }
  .editor-primary .subtitle-preview-box{
    height:105px;
  }
}

/* v1.2 actual One Click Auto Zoom + Mirror */
.one-click-options{
  display:grid;
  grid-template-columns:minmax(0,160px) minmax(0,1fr);
  gap:8px;
  margin-top:11px;
}
.one-click-options>label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#7f8ba0;
  font-size:8px;
}
.one-click-mirror{
  height:37px;
  align-self:end;
  flex-direction:row!important;
}
.one-click-start:disabled{
  opacity:.55;
  cursor:not-allowed;
}
@media(max-width:760px){
  .one-click-options{
    grid-template-columns:1fr 1fr;
  }
}

/* v1.5 blur check + final export */
.blur-export-workspace{display:grid;grid-template-columns:1.35fr .65fr;gap:12px;margin:12px 28px 32px}
.blur-panel,.final-export-panel{padding:14px}.blur-count{font-size:8px;color:#8c79ff}.blur-help{font-size:9px;color:#77849a;line-height:1.5}
.blur-controls{display:grid;grid-template-columns:120px 90px 90px auto auto;gap:7px;align-items:center}.mini-action{height:34px;border:1px solid #674cff;border-radius:8px;background:#4933a8;color:white;font-size:9px;font-weight:700;padding:0 11px;cursor:pointer}.mini-action.ghost{background:#111a2a;border-color:#34425a;color:#c1c8d5}.blur-list{display:grid;gap:5px;margin-top:10px}.blur-list-row{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;border:1px solid #26344c;border-radius:7px;background:#0a1220;color:#9da9bb;font-size:8px}.blur-list-row button{border:0;background:transparent;color:#e36f83;font-size:8px;cursor:pointer}
.blur-draw-layer{position:absolute;z-index:8;pointer-events:auto;touch-action:none;cursor:crosshair}.blur-draft-box,.saved-blur-box{position:absolute;border:2px solid #a77bff;background:#8a62ff22;box-sizing:border-box}.saved-blur-box{border-color:#50d7aa;background:#36b98d22;pointer-events:none}.saved-blur-box span{position:absolute;left:0;top:-17px;padding:2px 5px;border-radius:4px;background:#10251e;color:#65e4b6;font-size:7px;white-space:nowrap}
.export-actions{display:grid;gap:8px;margin-top:12px}.final-download{display:block;margin-top:10px;text-align:center;padding:10px;border:1px solid #2e7459;border-radius:9px;background:#0c281e;color:#67e3ae;text-decoration:none;font-size:10px;font-weight:700}
@media(max-width:900px){.blur-export-workspace{grid-template-columns:1fr}.blur-controls{grid-template-columns:1fr 1fr}.blur-controls .mini-action{width:100%}}
@media(max-width:760px){.blur-export-workspace{margin:8px 8px 20px}.blur-controls{grid-template-columns:1fr 1fr}.blur-draw-layer{touch-action:none}}

/* v1.6 One Click auto original-subtitle blur + final burn-in */
.one-click-options{grid-template-columns:minmax(0,160px) minmax(0,1fr) minmax(0,210px) minmax(0,130px)}
.one-click-original-blur{height:37px;align-self:end;flex-direction:row!important}
@media(max-width:900px){.one-click-options{grid-template-columns:1fr 1fr}}

/* v1.7 - Upload panel is always visible */
#upload-panel{
  display:block !important;
  visibility:visible !important;
}
.subtitle-editing #upload-panel{
  order:-20;
  min-height:0;
}
.subtitle-editing #control-stack{
  display:flex;
  flex-direction:column;
}
.subtitle-editing #subtitle-workspace{
  order:10;
}
.subtitle-editing .analyze-card{
  order:0;
}
@media(max-width:760px){
  #upload-panel{
    display:block !important;
  }
}

/* v1.8 One Click green processing bar */
.one-click-start{
  position:relative;
  overflow:hidden;
  padding-bottom:15px;
}
.one-click-label{
  position:relative;
  z-index:2;
}
.one-click-progress-track{
  position:absolute;
  left:10px;
  right:10px;
  bottom:6px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
  opacity:.35;
  transition:opacity .2s ease;
}
.one-click-progress-track>span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:#42e59a;
  box-shadow:0 0 10px #42e59a;
  transition:width .35s ease;
}
.one-click-start.processing .one-click-progress-track{
  opacity:1;
}
.one-click-start.indeterminate .one-click-progress-track>span{
  width:34% !important;
  animation:oneClickSlide 1.1s ease-in-out infinite;
}
@keyframes oneClickSlide{
  0%{transform:translateX(-120%)}
  50%{transform:translateX(105%)}
  100%{transform:translateX(310%)}
}

/* v1.9 subtitle readability + raised bottom position */
.live-subtitle-overlay.bottom{
  bottom:11% !important;
}
.subtitle-sample.bottom{
  bottom:24px;
}

/* v1.10: One Click is automatic; subtitle controls belong to Manual only */
#subtitle-workspace.one-click-hidden{display:none !important}
.live-subtitle-overlay.bottom{bottom:20% !important}

/* v1.11 One Click: subtitle controls are hidden; Manual keeps them */
#subtitle-workspace.one-click-hidden{
  display:none !important;
}

/* v1.12 Myanmar font correction */
.subtitle-sample,
.live-subtitle-overlay,
.result textarea.editable-srt,
#subtitle-result,
#recap-result{
  font-family:"Myanmar Text","Noto Sans Myanmar","Segoe UI",sans-serif !important;
  font-feature-settings:"kern" 1;
  text-rendering:optimizeLegibility;
}
.live-subtitle-overlay{
  font-weight:600;
  text-shadow:
    0 1px 2px #000,
    0 0 2px #000 !important;
}

/* v1.13 */
.saved-blur-box{border-width:1px}

/* v1.14: One Click keeps subtitle data alive while hiding the editor UI */
#subtitle-workspace.one-click-data-only{
  position:absolute !important;
  left:-100000px !important;
  top:0 !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  display:block !important;
}
.one-click-data-buffer{
  position:absolute !important;
  left:-100000px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* v1.18 One Click subtitle target:
   60px, max 3 lines, positioned near blur band's top edge */

/* v1.19 One Click final subtitle:
   font 62px, max 3 lines, lower-third placement */

/* v1.20 Microsoft narrator controls */
.one-click-voice-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.one-click-voice-settings label{display:flex;flex-direction:column;gap:5px}
@media(max-width:700px){.one-click-voice-settings{grid-template-columns:1fr}}

/* v1.22: One Click is fully automatic; manual blur/export controls stay hidden. */
body.one-click-active #blur-checker,
body.one-click-active #final-export-panel,
body.one-click-active .blur-checker,
body.one-click-active .final-export,
body.one-click-active [data-manual-only="true"]{
  display:none !important;
}

/* Bigger readable Myanmar/English One Click status text */
#one-click-note,
.one-click-note,
.one-click-status,
#one-click-status{
  font-size:16px !important;
  line-height:1.65 !important;
  font-weight:600;
  min-height:26px;
}

/* Show the missing voice stage in the workflow without exposing manual controls. */
.one-click-workflow::after{
  content:"6  Generate Voice   →   7  Export";
  display:block;
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  opacity:.9;
}

/* v1.23 hard-hide manual blur/export workspace in One Click mode */
body.one-click-active #blur-export-workspace{
  display:none !important;
}
body.one-click-active #blur-draw-layer{
  display:none !important;
}

/* v1.26 - One Click only */
#mode-manual,
#manual-tools-panel,
#blur-export-workspace{
  display:none !important;
}

.mode-switcher{
  grid-template-columns:1fr !important;
}
#mode-auto{
  width:100%;
}

.one-click-download-wrap{
  margin:12px 0 14px;
  padding:14px;
  border:1px solid rgba(66,229,154,.45);
  border-radius:12px;
  background:rgba(30,160,100,.10);
  text-align:center;
}
.one-click-download-wrap.hidden{
  display:none !important;
}
.download-ready{
  margin-bottom:9px;
  font-size:15px;
  font-weight:700;
}
.one-click-download{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:14px 18px;
  border-radius:10px;
  text-decoration:none;
  font-size:16px;
  font-weight:800;
  background:linear-gradient(90deg,#6547ff,#d436c7);
  color:#fff !important;
}
.one-click-download:hover{
  filter:brightness(1.08);
}


/* =========================================================
   v1.27 Compact One Click Studio
   ========================================================= */

.translator-main{
  max-width:1500px;
  margin:0 auto;
}

/* Header tracker becomes compact rather than tall. */
.compact-top-flow{
  height:58px;
  padding:0 14px;
  margin-bottom:10px;
  border-radius:12px;
}
.compact-top-flow .step{
  min-width:92px;
}
.compact-top-flow .step i{
  width:26px;
  height:26px;
}
.compact-top-flow .step b{
  font-size:10px;
}
.compact-top-flow .step span{
  font-size:7px;
}

/* One Click only card is a small header, not a large full-width block. */
.mode-switcher{
  margin-bottom:9px !important;
}
#mode-auto{
  min-height:52px;
  padding:9px 12px;
}
#mode-auto .mode-icon{
  width:34px;
  height:34px;
}
#mode-auto b{
  font-size:11px;
}
#mode-auto small{
  font-size:8px;
}

/* Main desktop layout: controls left, permanent preview right. */
.one-click-layout{
  display:grid;
  grid-template-columns:minmax(440px, 0.92fr) minmax(520px, 1.08fr);
  grid-template-areas:
    "flow preview"
    "controls preview";
  gap:12px;
  align-items:start;
}
.one-click-layout > #auto-flow-card{
  grid-area:flow;
  min-width:0;
}
.one-click-layout > #studio-grid{
  display:contents;
}
.one-click-layout #control-stack{
  grid-area:controls;
  min-width:0;
}
.one-click-layout #preview-stack{
  grid-area:preview;
  min-width:0;
  position:sticky;
  top:74px;
}

/* Compact One Click controller. */
.auto-flow-card{
  padding:12px 13px;
  margin:0;
  border-color:#31305f;
  box-shadow:0 12px 36px rgba(0,0,0,.12);
}
.auto-flow-title{
  font-size:9px;
  font-weight:700;
}
.auto-flow-steps{
  gap:5px;
  margin-top:10px;
  padding-bottom:2px;
}
.auto-flow-steps > b{
  font-size:10px;
}
.auto-node{
  min-width:52px;
}
.auto-node i{
  width:22px;
  height:22px;
  font-size:8px;
}
.auto-node span{
  font-size:7px;
  margin-top:4px;
}
.auto-flow-card > p{
  margin-top:8px;
  line-height:1.45;
}

/* Four compact automatic settings in a row where possible. */
.one-click-options{
  grid-template-columns:minmax(120px,.8fr) minmax(150px,1fr) minmax(170px,1.15fr) minmax(100px,.72fr) !important;
  gap:7px;
  margin-top:9px;
}
.one-click-options .switch-row{
  min-width:0;
}
.one-click-options .input,
.one-click-voice-settings .input{
  height:34px;
  font-size:9px;
}
.one-click-voice-settings{
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:8px 0 0;
}
.one-click-voice-settings label{
  font-size:9px;
}

/* Start button is deliberately compact instead of full width. */
#one-click-start{
  width:230px !important;
  max-width:100%;
  height:38px;
  margin:10px auto 0 !important;
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:9px;
  font-size:10px;
  box-shadow:0 7px 20px rgba(101,72,217,.20);
}
#one-click-start .one-click-progress-track{
  position:absolute;
  left:7px;
  right:7px;
  bottom:3px;
}

/* Status is visible and readable without taking over the page. */
#one-click-note{
  margin:8px 0 0;
  padding:8px 10px;
  border:1px solid rgba(128,112,255,.14);
  border-radius:8px;
  background:rgba(4,8,15,.32);
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:600;
}

/* Download: compact card/button, visible inside One Click. */
.one-click-download-wrap{
  max-width:285px;
  margin:10px auto 0 !important;
  padding:9px 10px !important;
  border-radius:9px !important;
}
.download-ready{
  margin-bottom:6px !important;
  font-size:11px !important;
}
.one-click-download{
  width:auto !important;
  min-width:210px;
  max-width:260px;
  margin:0 auto;
  padding:10px 15px !important;
  border-radius:8px !important;
  font-size:12px !important;
}

/* Left-side upload / API panels compact like workstation controls. */
#control-stack{
  gap:9px;
}
#control-stack .panel{
  padding:11px;
  border-radius:12px;
}
#upload-panel .drop{
  height:120px;
  gap:6px;
}
#upload-panel .cloud{
  font-size:24px;
}
#upload-panel .drop strong{
  padding:7px 12px;
}
#upload-panel .upload-btn{
  width:auto;
  min-width:150px;
  display:block;
  margin:8px auto 0;
  padding:8px 18px;
}
.analyze-card .settings-row{
  gap:7px;
}
.analyze-card .analyze-btn{
  min-height:42px;
}

/* Preview gets visual priority. */
#preview-card{
  padding:10px;
  border-color:#293550;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
#preview-card .panel-title{
  margin-bottom:8px;
}
#preview-card .video-stage{
  height:min(72vh,760px);
  min-height:520px;
  border-radius:9px;
}
#preview-card .player{
  height:40px;
}

/* Hidden auto data/results must never steal layout space. */
body.one-click-active #subtitle-workspace.one-click-data-only{
  position:absolute !important;
}
body.one-click-active #recap-workspace{
  max-height:220px;
}
body.one-click-active #results-panel{
  grid-template-columns:1fr;
}

/* Mobile/tablet: preview first, controls below, buttons stay compact. */
@media(max-width:1050px){
  .one-click-layout{
    grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr);
  }
  .one-click-options{
    grid-template-columns:1fr 1fr !important;
  }
  #preview-card .video-stage{
    min-height:430px;
  }
}
@media(max-width:760px){
  .compact-top-flow{
    overflow-x:auto;
    height:56px;
  }
  .one-click-layout{
    display:flex;
    flex-direction:column;
  }
  .one-click-layout #preview-stack{
    order:1;
    width:100%;
    position:relative;
    top:auto;
  }
  .one-click-layout > #auto-flow-card{
    order:2;
    width:100%;
  }
  .one-click-layout #control-stack{
    order:3;
    width:100%;
  }
  #preview-card .video-stage{
    min-height:0;
    height:auto;
    max-height:68vh;
    aspect-ratio:9/16;
  }
  .one-click-options,
  .one-click-voice-settings{
    grid-template-columns:1fr 1fr !important;
  }
  #one-click-start{
    width:210px !important;
  }
}
@media(max-width:430px){
  .one-click-options,
  .one-click-voice-settings{
    grid-template-columns:1fr !important;
  }
  .auto-node{
    min-width:48px;
  }
  #one-click-note{
    font-size:12px !important;
  }
}

.one-click-audio-setting{margin:8px 0 2px}
.original-audio-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid rgba(130,120,255,.16);border-radius:9px;background:rgba(6,10,18,.26);font-size:10px;font-weight:700}
.audio-toggle-control{display:flex;align-items:center;gap:7px}
.audio-toggle-control input{position:absolute;opacity:0;pointer-events:none}
.audio-toggle-slider{position:relative;width:34px;height:18px;border-radius:999px;background:#3c4250;cursor:pointer;transition:.2s}
.audio-toggle-slider::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:.2s}
.audio-toggle-control input:checked + .audio-toggle-slider{background:#6547ff}
.audio-toggle-control input:checked + .audio-toggle-slider::after{transform:translateX(16px)}
#original-audio-state{min-width:48px;font-size:9px}

/* v1.32 server-side Gemini secret status */
.server-key-badge{
  font-size:8px;
  font-weight:700;
  padding:4px 7px;
  border-radius:999px;
}
.server-key-badge.ready{
  color:#58dfa7;
  background:#12382c;
}
.server-key-badge.missing{
  color:#ffb878;
  background:#432816;
}
.server-api-state{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:8px 10px;
  margin-bottom:9px;
  border-radius:9px;
  border:1px solid #25443a;
  background:#0b211b;
}
.server-api-state.missing{
  border-color:#5a3b21;
  background:#24170d;
}
.server-api-state>span{
  width:27px;
  height:27px;
  flex:0 0 27px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
}
.server-api-state.ready>span{
  color:#52e0a4;
  background:#164b38;
}
.server-api-state.missing>span{
  color:#ffb878;
  background:#58361e;
}
.server-api-state b,
.server-api-state small{
  display:block;
}
.server-api-state b{
  font-size:10px;
}
.server-api-state small{
  margin-top:3px;
  font-size:8px;
  color:#8390a3;
}

/* v1.34 trial concurrency */
.trial-worker-badge{
  display:inline-flex;
  align-items:center;
  margin:0 0 7px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(101,71,255,.28);
  background:rgba(101,71,255,.10);
  color:#bdb4ff;
  font-size:8px;
  font-weight:700;
}
.byok-badge{font-size:8px;font-weight:700;padding:4px 8px;border-radius:999px;color:#bdb4ff;background:rgba(101,71,255,.14);border:1px solid rgba(101,71,255,.3)}.user-api-state{padding:10px;margin-bottom:9px;border:1px solid #263452;border-radius:10px;background:#0b1424}.api-key-label b,.api-key-label small{display:block}.api-key-label small{font-size:8px;color:#8490a5;margin-top:3px}.api-key-row{display:flex;gap:7px;margin-top:8px}.api-key-row input{min-width:0;flex:1;background:#08101d;color:#f2f4ff;border:1px solid #33415f;border-radius:8px;padding:9px 10px}.api-key-row button{border:1px solid #3a4968;background:#121d31;color:#dce3f4;border-radius:8px;padding:0 12px}
.api-key-saved-note{
  display:block;
  margin-top:5px;
  font-size:8px;
  color:#748198;
}

.trial-strip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;padding:9px 12px;border:1px solid #2b3955;border-radius:10px;background:#0c1525;font-size:9px;color:#9aa8be}.trial-strip b{color:#d7d0ff}.trial-strip span{padding:3px 7px;border-radius:999px;background:#111d31}.trial-strip strong{margin-left:auto;color:#a9f3c4}

/* v1.36.1 - Mobile readability */
@media (max-width:700px){
 body{font-size:15px}
 .panel-title b{font-size:13px}.panel-title span{font-size:12px}
 .trial-strip{font-size:11px;line-height:1.45;padding:10px}
 .trial-strip strong{font-size:11px}.trial-strip span{font-size:10px}
 .api-key-label b{font-size:12px}
 .api-key-label small,.api-key-saved-note{font-size:10px;line-height:1.4}
 .api-key-row input{font-size:13px;min-height:42px}
 .api-key-row button{font-size:11px;min-height:42px}
 button,.btn,.button{min-height:42px;font-size:12px}
 input,select,textarea{font-size:14px}
 label,.label,.setting-label{font-size:11px}
 #one-click-note,.status-text,.progress-text{font-size:11px;line-height:1.5}
 #subtitle-result,#recap-result,textarea{font-size:14px;line-height:1.6}
}

.notify-strip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:8px 11px;border:1px solid #25344f;border-radius:10px;background:#0a1322;font-size:10px;color:#aeb9ca}
.notify-strip button{min-height:30px;padding:5px 10px}.notify-strip small{opacity:.8}