#tust-root /* TuTaV Studio Pro — dark video-studio theme (nhúng trong tab web cũ) */
* {  box-sizing: border-box; margin: 0; padding: 0;  }
#tust-root { 
  --bg: #ffffff;
  --bg2: #f8fafc;
  --card: #ffffff;
  --card2: #f1f5f9;
  --line: #e2e8f0;
  --txt: #0f172a;
  --mut: #64748b;
  --dim: #94a3b8;
  --pri: #0284c7;
  --pri2: #0369a1;
  --ok: #16a34a;
  --err: #ef4444;
  --r: 16px;
 }
#tust-root {  color-scheme: light;  }
#tust-root { 
  background: var(--bg);
  color: var(--txt);
  font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  border-radius: 16px;
  padding: 4px;
 }
#tust-root #app {  min-height: 60vh; display: flex; flex-direction: column;  }
#tust-root /* ===== topbar ===== */
.topbar { 
  display: flex; align-items: center; gap: 14px;
  padding: 6px 12px;
  background: rgba(16,17,20,.6);
  border-bottom: 1px solid var(--line);
 }
#tust-root .brand {  display: flex; align-items: center; gap: 8px; cursor: pointer;  }
#tust-root .logo {  font-size: 18px;  }
#tust-root .brand-t b {  font-size: 14.5px; letter-spacing: .2px;  }
#tust-root .pro {  color: var(--pri);  }
#tust-root /* nav gọn — pill segmented */
.nav { 
  display: flex; gap: 4px; flex: 1; max-width: 460px; margin: 0 auto;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 4px;
 }
#tust-root .nav-btn { 
  flex: 1; background: none; border: none; color: var(--mut); font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 10px; border-radius: 9px; cursor: pointer; transition: .15s; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px;
 }
#tust-root .nav-btn:hover {  color: var(--txt); background: var(--card);  }
#tust-root .nav-btn.active {  color: #fff; background: linear-gradient(135deg, var(--pri), var(--pri2)); box-shadow: 0 2px 10px rgba(34,211,238,.25);  }
#tust-root .keydot {  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut);  }
#tust-root .keydot .dot {  width: 8px; height: 8px; border-radius: 50%; background: var(--err);  }
#tust-root .keydot.ok .dot {  background: var(--ok); box-shadow: 0 0 8px rgba(34,197,94,.7);  }
#tust-root /* ===== views ===== */
.view {  display: none; flex: 1; padding: 26px clamp(14px, 4vw, 46px) 40px; max-width: 1240px; margin: 0 auto; width: 100%;  }
#tust-root .view.active {  display: block;  }
#tust-root #view-studio.active, #tust-root #view-library.active {  display: block;  }
#tust-root /* ===== hero ===== */
.hero h1 {  font-size: clamp(22px, 3.4vw, 34px); font-weight: 800; line-height: 1.25;  }
#tust-root .hl {  background: linear-gradient(90deg, var(--pri), var(--pri2)); -webkit-background-clip: text; background-clip: text; color: transparent;  }
#tust-root .sub {  color: var(--mut); margin-top: 8px; max-width: 720px; font-size: 14px;  }
#tust-root .pastebox { 
  margin-top: 22px; background: var(--card); border: 1.5px dashed var(--line); border-radius: var(--r);
  padding: 16px; transition: border-color .2s;
 }
#tust-root .pastebox.hot {  border-color: var(--pri); box-shadow: 0 0 0 4px rgba(34,211,238,.12);  }
#tust-root .pb-icon {  font-size: 20px; margin-bottom: 6px;  }
#tust-root .pastebox textarea { 
  width: 100%; background: transparent; border: none; outline: none; color: var(--txt);
  font: inherit; font-size: 15px; resize: vertical; min-height: 56px;
 }
#tust-root .pb-foot {  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap;  }
#tust-root .badge { 
  font-size: 12px; font-weight: 600; color: var(--mut); background: var(--bg2);
  border: 1px solid var(--line); padding: 5px 10px; border-radius: 999px; max-width: 60%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
#tust-root .badge.on {  color: #67e8f9; border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.1);  }
#tust-root .badge.wrap {  white-space: normal; max-width: 100%; line-height: 1.5; border-radius: 12px;  }
#tust-root /* tin kênh dài — xuống dòng, #tust-root không cắt "…" */
.pb-actions {  display: flex; gap: 8px;  }
#tust-root .dropzone { 
  margin-top: 12px; border: 1.5px dashed var(--line); border-radius: var(--r);
  padding: 14px 16px; color: var(--dim); font-size: 13px; cursor: pointer; transition: .15s;
 }
#tust-root .dropzone:hover, #tust-root .dropzone.hot {  border-color: var(--pri); color: var(--mut);  }
#tust-root /* ===== options ===== */
.opts {  margin-top: 20px;  }
#tust-root .opt.wide {  grid-column: 1 / -1;  }
#tust-root .clip-row {  display: flex; align-items: center; gap: 8px;  }
#tust-root .clip-row input[type="number"] { 
  flex: 1; background: var(--bg2); border: 1px solid var(--line); color: var(--txt); border-radius: 9px;
  padding: 9px 11px; font: inherit; font-size: 14px; outline: none; width: 100%;
 }
#tust-root .clip-row input[type="number"]:focus {  border-color: var(--pri);  }
#tust-root .clip-row .btn {  padding: 9px 12px; flex: none;  }
#tust-root .clip-arrow {  color: var(--dim); flex: none;  }
#tust-root .clip-hint {  font-size: 11.5px; color: var(--dim); min-height: 14px; display: block; margin-top: 4px;  }
#tust-root .opt-chips {  display: flex; gap: 8px; flex-wrap: wrap;  }
#tust-root .chip { 
  background: var(--card); border: 1px solid var(--line); color: var(--mut);
  font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: .15s;
 }
#tust-root .chip:hover {  color: var(--txt);  }
#tust-root .chip.active {  color: #fff; background: linear-gradient(135deg, var(--pri), var(--pri2)); border-color: transparent;  }
#tust-root .opt-grid { 
  margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px;
 }
#tust-root .opt {  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px;  }
#tust-root .opt > span {  font-size: 12px; font-weight: 600; color: var(--mut);  }
#tust-root .opt select, #tust-root .opt input[type="text"], #tust-root .opt input[type="password"], #tust-root .set-card input, #tust-root .modal input { 
  background: var(--bg2); border: 1px solid var(--line); color: var(--txt); border-radius: 9px;
  padding: 9px 11px; font: inherit; font-size: 14px; outline: none; width: 100%;
 }
#tust-root .opt select:focus, #tust-root input:focus {  border-color: var(--pri);  }
#tust-root .opt input[type="range"] {  accent-color: var(--pri);  }
#tust-root .opt .val {  font-size: 12px; color: var(--pri);  }
#tust-root .opt.toggle {  flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;  }
#tust-root .opt.toggle > span {  font-size: 13px;  }
#tust-root .opt input[type="checkbox"] {  width: 20px; height: 20px; accent-color: var(--pri); cursor: pointer;  }
#tust-root /* ===== tùy chọn nâng cao — ẨN MẶC ĐỊNH, #tust-root mọi thứ vẫn chạy với giá trị tốt nhất ===== */
.adv-opts {  grid-column: 1 / -1; background: var(--card); border: 1px dashed var(--line); border-radius: 12px;  }
#tust-root .adv-opts summary { 
  cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--mut);
  user-select: none; list-style: none; display: flex; align-items: center; gap: 8px;
 }
#tust-root .adv-opts summary::after {  content: '▾'; margin-left: auto; color: var(--dim); transition: transform .15s ease;  }
#tust-root .adv-opts[open] summary::after {  transform: rotate(180deg);  }
#tust-root .adv-opts summary::-webkit-details-marker {  display: none;  }
#tust-root .adv-opts summary:hover {  color: var(--txt);  }
#tust-root .adv-body {  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; padding: 2px 14px 14px;  }
#tust-root /* ===== features ===== */
.features {  margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;  }
#tust-root .feat {  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px;  }
#tust-root .feat .fi {  font-size: 22px;  }
#tust-root .feat b {  display: block; margin: 8px 0 4px; font-size: 14px;  }
#tust-root .feat small {  color: var(--mut); font-size: 12.5px; line-height: 1.5; display: block;  }
#tust-root /* ===== buttons ===== */
.btn { 
  font: inherit; font-weight: 700; font-size: 13.5px; border-radius: 10px; cursor: pointer;
  padding: 10px 16px; border: 1px solid transparent; transition: .15s; white-space: nowrap;
 }
#tust-root .btn-pri {  background: linear-gradient(135deg, var(--pri), var(--pri2)); color: #fff; box-shadow: 0 6px 18px rgba(8,145,178,.35);  }
#tust-root .btn-pri:hover {  transform: translateY(-1px); box-shadow: 0 10px 24px rgba(8,145,178,.45);  }
#tust-root .btn-pri:disabled {  opacity: .55; cursor: not-allowed; transform: none;  }
#tust-root .btn-ghost {  background: var(--card); border-color: var(--line); color: var(--txt);  }
#tust-root .btn-ghost:hover {  border-color: var(--pri); color: var(--pri);  }
#tust-root .btn-danger {  background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #f87171;  }
#tust-root .btn-danger:hover {  background: rgba(239,68,68,.2);  }
#tust-root .btn.big {  width: 100%; padding: 14px; font-size: 15px;  }
#tust-root /* ===== pipeline ===== */
.pipe-card {  max-width: 780px; margin: 20px auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px;  }
#tust-root .pbar {  height: 10px; background: var(--bg2); border-radius: 999px; overflow: hidden; margin: 14px 0 18px;  }
#tust-root .pbar.slim {  height: 7px; margin: 10px 0;  }
#tust-root .pfill {  height: 100%; width: 0%; background: linear-gradient(90deg, var(--pri), var(--pri2)); border-radius: 999px; transition: width .4s ease;  }
#tust-root .steps {  display: flex; flex-direction: column; gap: 4px;  }
#tust-root .step {  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--dim);  }
#tust-root .step .si {  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--bg2); border: 1px solid var(--line); flex: none;  }
#tust-root .step.active {  color: var(--txt); background: var(--card2);  }
#tust-root .step.active .si {  border-color: var(--pri); color: var(--pri); animation: tust-pulse 1.2s infinite;  }
#tust-root .step.done {  color: var(--mut);  }
#tust-root .step.done .si {  background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.4); color: var(--ok);  }
#tust-root .step .sinfo {  margin-left: auto; font-size: 11.5px; color: var(--dim);  }
@keyframes tust-pulse {  0%,100% { box-shadow: 0 0 0 0 rgba(34,211,238,.4);} 50% { box-shadow: 0 0 0 6px rgba(34,211,238,0);}  }
#tust-root .logbox { 
  margin-top: 14px; background: #0b0c0e; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; font-family: 'Sarasa Mono SC', ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12px; color: var(--mut); max-height: 220px; overflow-y: auto; line-height: 1.6;
 }
#tust-root .logbox.slim {  max-height: 150px;  }
#tust-root .logbox .l-ok {  color: var(--ok);  }
#tust-root .logbox .l-err {  color: var(--err);  }
#tust-root .logbox .l-hl {  color: var(--pri);  }
#tust-root .pipe-actions {  display: flex; justify-content: space-between; margin-top: 16px;  }
#tust-root /* ===== studio ===== */
.studio-head {  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap;  }
#tust-root .studio-head h2 {  font-size: 19px; line-height: 1.3;  }
#tust-root .sh-meta {  color: var(--mut); font-size: 13px; margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap;  }
#tust-root .sh-meta .tag {  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 11.5px;  }
#tust-root .studio-grid {  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 16px; align-items: start;  }
@media (max-width: 980px) { #tust-root .studio-grid {  grid-template-columns: 1fr;  }
  }
#tust-root .player-card {  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px;  }
#tust-root .video-wrap {  position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9;  }
#tust-root .video-wrap video {  width: 100%; height: 100%; display: block;  }
#tust-root .sub-overlay { 
  position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-end;
  padding: 0 3%; pointer-events: none; z-index: 5;
 }
#tust-root .sub-overlay[data-pos="top"] {  top: 3%; align-items: flex-start;  }
#tust-root .sub-overlay[data-pos="mid"] {  top: 50%; transform: translateY(-50%); align-items: center;  }
#tust-root .sub-overlay[data-pos="bottom"] {  bottom: 3%;  }
#tust-root .sub-overlay[data-align="left"] {  justify-content: flex-start; text-align: left;  }
#tust-root .sub-overlay[data-align="right"] {  justify-content: flex-end; text-align: right;  }
#tust-root .sub-text {  display: inline-block; white-space: pre-wrap;  }
#tust-root .big-play { 
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 6; cursor: pointer;
  font-size: 52px; color: #fff; background: rgba(0,0,0,.25); border-radius: 10px; transition: .15s;
 }
#tust-root .big-play:hover {  background: rgba(0,0,0,.4);  }
#tust-root .controls {  display: flex; align-items: center; gap: 10px; margin-top: 12px;  }
#tust-root .ctl { 
  background: var(--bg2); border: 1px solid var(--line); color: var(--txt); width: 38px; height: 38px;
  border-radius: 10px; cursor: pointer; font-size: 15px; flex: none; transition: .15s;
 }
#tust-root .ctl:hover {  border-color: var(--pri);  }
#tust-root .time {  font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; flex: none;  }
#tust-root .seek {  flex: 1; accent-color: var(--pri); height: 4px; cursor: pointer;  }
#tust-root .mixer {  margin-top: 12px; display: flex; flex-direction: column; gap: 8px;  }
#tust-root .mix-row {  display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;  }
#tust-root .mix-l {  font-size: 12.5px; font-weight: 600; color: var(--mut); flex: none; width: 160px;  }
#tust-root .mix-modes {  display: flex; gap: 4px; flex: none;  }
#tust-root .mbtn { 
  background: var(--card); border: 1px solid var(--line); color: var(--dim); font: inherit; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: .15s;
 }
#tust-root .mbtn.active {  color: var(--pri); border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.1);  }
#tust-root .mix-row input[type="range"] {  flex: 1; accent-color: var(--pri);  }
#tust-root .hint {  margin-top: 10px; font-size: 12px; color: var(--dim);  }
#tust-root .hint.big {  font-size: 13px; color: var(--mut); line-height: 1.8;  }
#tust-root /* ===== right panel ===== */
.panel {  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;  }
#tust-root .tabs {  display: flex; border-bottom: 1px solid var(--line);  }
#tust-root .tab { 
  flex: 1; background: none; border: none; color: var(--mut); font: inherit; font-size: 13px; font-weight: 700;
  padding: 13px 8px; cursor: pointer; border-bottom: 2px solid transparent; transition: .15s;
 }
#tust-root .tab:hover {  color: var(--txt);  }
#tust-root .tab.active {  color: var(--pri); border-bottom-color: var(--pri);  }
#tust-root .tabpane {  display: none; padding: 16px; max-height: min(72vh, 760px); overflow-y: auto;  }
#tust-root .tabpane.active {  display: block;  }
#tust-root .presets {  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px;  }
#tust-root .preset { 
  background: #000; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer;
  aspect-ratio: 16/7; display: grid; place-items: center; position: relative; overflow: hidden; transition: .15s;
 }
#tust-root .preset:hover {  border-color: var(--pri);  }
#tust-root .preset.sel {  border-color: var(--pri); box-shadow: 0 0 0 3px rgba(34,211,238,.18);  }
#tust-root .preset .pv {  font-size: clamp(9px, 1.5vw, 12px); line-height: 1.35; text-align: center; padding: 0 8px; max-width: 100%;  }
#tust-root .preset .pn {  position: absolute; bottom: 3px; right: 6px; font-size: 8.5px; color: rgba(255,255,255,.55); font-weight: 700; letter-spacing: .4px;  }
#tust-root .style-grid {  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;  }
#tust-root .style-grid .st.wide, #tust-root .st.wide {  grid-column: 1 / -1;  }
#tust-root .st {  display: flex; flex-direction: column; gap: 5px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;  }
#tust-root .st > span {  font-size: 11.5px; font-weight: 600; color: var(--mut);  }
#tust-root .st select, #tust-root .st input[type="color"] {  background: var(--card); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; outline: none; width: 100%;  }
#tust-root .st input[type="color"] {  padding: 2px; height: 38px; cursor: pointer;  }
#tust-root .st input[type="range"] {  accent-color: var(--pri);  }
#tust-root .st .val {  font-size: 11px; color: var(--pri);  }
#tust-root .st.row2 {  flex-direction: row; align-items: center; gap: 8px;  }
#tust-root .st.row2 > span {  flex: none;  }
#tust-root .st.row2 select {  flex: 1; width: auto;  }
#tust-root .act-row {  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;  }
#tust-root .act-row.top {  margin: 0 0 12px;  }
#tust-root /* cues */
.cues {  display: flex; flex-direction: column; gap: 8px;  }
#tust-root .cue {  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;  }
#tust-root .cue.playing {  border-color: var(--pri);  }
#tust-root .cue-top {  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;  }
#tust-root .cue-time {  font-size: 11px; color: var(--pri); font-variant-numeric: tabular-nums; cursor: pointer;  }
#tust-root .cue-src {  font-size: 12px; color: var(--dim);  }
#tust-root .cue-act {  margin-left: auto; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px;  }
#tust-root .cue-act:hover {  color: var(--pri); background: var(--card);  }
#tust-root .cue textarea { 
  width: 100%; background: transparent; border: 1px solid transparent; color: var(--txt); font: inherit; font-size: 13.5px;
  resize: vertical; min-height: 40px; outline: none; border-radius: 8px; padding: 6px 8px;
 }
#tust-root .cue textarea:focus {  border-color: var(--pri); background: var(--card);  }
#tust-root /* export */
.exp-note {  font-size: 13px; color: var(--mut); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;  }
#tust-root #tab-export .opt {  margin-bottom: 10px;  }
#tust-root #tab-export .btn.big {  margin-top: 6px;  }
#tust-root .exp-done {  margin-top: 14px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); border-radius: 12px; padding: 14px;  }
#tust-root .ok-badge {  color: var(--ok); font-weight: 800; margin-bottom: 6px;  }
#tust-root #expDoneInfo {  font-size: 13px; color: var(--mut); line-height: 1.7;  }
#tust-root /* ===== library ===== */
.lib-head {  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px;  }
#tust-root .lib-head h2 {  font-size: 20px;  }
#tust-root .count {  color: var(--pri); font-size: 14px;  }
#tust-root .lib-head .sub {  flex-basis: 100%; margin: 0 0 8px;  }
#tust-root .lib-grid {  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; margin-top: 14px;  }
#tust-root .lib-card {  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: .18s;  }
#tust-root .lib-card:hover {  transform: translateY(-3px); border-color: var(--pri);  }
#tust-root .lib-thumb {  position: relative; aspect-ratio: 16/10; background: #000; display: grid; place-items: center;  }
#tust-root .lib-thumb img {  width: 100%; height: 100%; object-fit: cover; display: block;  }
#tust-root .lib-thumb .ph {  font-size: 34px; opacity: .5;  }
#tust-root .lib-dur {  position: absolute; bottom: 6px; right: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums;  }
#tust-root .lib-body {  padding: 11px 13px;  }
#tust-root .lib-body b {  display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
#tust-root .lib-meta {  display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap;  }
#tust-root .lib-meta span {  font-size: 10.5px; color: var(--mut); background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;  }
#tust-root .lib-empty {  grid-column: 1/-1; text-align: center; color: var(--dim); padding: 60px 20px;  }
#tust-root .lib-empty .e1 {  font-size: 42px;  }
#tust-root /* ===== modal ===== */
.modal-wrap {  position: fixed; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 100; padding: 16px;  }
#tust-root .modal {  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; width: min(94vw, 460px); position: relative; max-height: 92vh; overflow-y: auto;  }
#tust-root .modal.wide {  width: min(96vw, 860px);  }
#tust-root .modal h3 {  font-size: 17px; margin-bottom: 8px;  }
#tust-root .modal p {  color: var(--mut); font-size: 13.5px; margin-bottom: 12px;  }
#tust-root .modal .row {  display: flex; gap: 8px;  }
#tust-root .modal .row input {  flex: 1;  }
#tust-root .modal-x {  position: absolute; top: 10px; right: 12px; background: var(--bg2); border: 1px solid var(--line); color: var(--mut); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 14px;  }
#tust-root .modal-x:hover {  color: var(--txt);  }
#tust-root .err {  color: var(--err); font-size: 12.5px; margin-top: 8px; min-height: 16px;  }
#tust-root #libVideo {  width: 100%; max-height: 62vh; border-radius: 10px; background: #000;  }
#tust-root /* ===== settings ===== */
.set-card {  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; max-width: 680px; margin-bottom: 14px;  }
#tust-root .set-card h3 {  font-size: 16px; margin-bottom: 6px;  }
#tust-root .set-card p {  color: var(--mut); font-size: 13.5px; margin-bottom: 12px;  }
#tust-root .set-card .row {  display: flex; gap: 8px;  }
#tust-root .set-card .row input {  flex: 1; background: var(--bg2); border: 1px solid var(--line); color: var(--txt); border-radius: 9px; padding: 9px 11px; font: inherit; outline: none;  }
#tust-root /* trạng thái kết nối Telegram tự động */
.tglink-status {  border-radius: 9px; border: 1px solid var(--line); background: var(--bg2); padding: 10px 12px; font-size: 13px; color: var(--mut); line-height: 1.65; margin-bottom: 10px;  }
#tust-root .tglink-status.ok {  border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); color: #4ade80; font-weight: 700;  }
#tust-root .tglink-status.wait {  border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.08);  }
#tust-root .tglink-status.warn {  border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.08); color: #67e8f9;  }
#tust-root .tglink-status .code {  font-size: 20px; font-weight: 800; letter-spacing: 3px; color: var(--pri);  }
#tust-root .tglink-status a {  color: var(--pri); font-weight: 700;  }
#tust-root .tglink-status .tglink-open {  display: inline-block; margin-top: 8px; background: linear-gradient(135deg, var(--pri), var(--pri2)); color: #fff; border-radius: 9px; padding: 8px 14px; font-weight: 700; text-decoration: none; font-size: 13px;  }
#tust-root .tglink-status .tglink-open:hover {  filter: brightness(1.08);  }
#tust-root code {  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--pri); font-size: 12.5px;  }
#tust-root /* ===== footer ===== */
.foot {  margin-top: auto; border-top: 1px solid var(--line); padding: 14px 20px; text-align: center; color: var(--dim); font-size: 12px;  }
#tust-root /* ===== toasts ===== */
#toasts {  position: fixed; top: 16px; right: 16px; z-index: 2147483000; display: flex; flex-direction: column; gap: 8px;  }
#tust-root .toast { 
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--pri);
  color: var(--txt); border-radius: 10px; padding: 11px 14px; font-size: 13px; max-width: 340px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: tust-slidein .2s ease;
 }
#tust-root .toast.ok {  border-left-color: var(--ok);  }
#tust-root .toast.err {  border-left-color: var(--err);  }
@keyframes tust-slidein {  from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; }  }
#tust-root /* scrollbar */
::-webkit-scrollbar {  width: 9px; height: 9px;  }
#tust-root ::-webkit-scrollbar-track {  background: transparent;  }
#tust-root ::-webkit-scrollbar-thumb {  background: #33353d; border-radius: 8px;  }
#tust-root ::-webkit-scrollbar-thumb:hover {  background: #45474f;  }
@media (max-width: 720px) { #tust-root .topbar {  flex-wrap: wrap; gap: 8px; padding: 10px 14px;  }
#tust-root .nav {  order: 3; width: 100%; overflow-x: auto;  }
#tust-root .keydot {  margin-left: auto;  }
#tust-root .mix-l {  width: 110px; font-size: 11.5px;  }
#tust-root .mix-modes {  flex-direction: column; gap: 3px;  }
#tust-root .style-grid {  grid-template-columns: 1fr;  }
#tust-root .presets {  grid-template-columns: repeat(3, 1fr);  }
#tust-root .hero h1 {  font-size: 22px;  }
#tust-root .view {  padding: 18px 12px 32px;  }

 }
#tust-root /* ===== BATCH (hàng loạt) ===== */
.bitem {  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.04); margin-bottom:6px; border:1px solid rgba(255,255,255,.06);  }
#tust-root .bitem.run {  background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.35);  }
#tust-root .bitem.done {  background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.3);  }
#tust-root .bitem.error {  background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.3);  }
#tust-root .bitem .bi {  font-size:18px; flex:0 0 24px; text-align:center;  }
#tust-root .bitem .bt {  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600;  }
#tust-root .bitem .bn {  flex:0 0 auto; max-width:26%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; opacity:.75;  }
#tust-root /* nút hành động TỪNG LINK: ⏭ bỏ qua · ⬆ ưu tiên · 🔄 tải lại · ✕ bỏ link */
.bitem .bacts {  flex:0 0 auto; display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end;  }
#tust-root .bact { 
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1; padding: 6px 8px; border-radius: 7px;
  background: rgba(255,255,255,.07); color: var(--txt); border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; transition: .15s; white-space: nowrap;
 }
#tust-root .bact:hover {  background: rgba(59,130,246,.22); border-color: rgba(59,130,246,.5);  }
#tust-root .bact.danger:hover {  background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.55);  }
#tust-root .bitem.run .bact {  background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.4);  }
#tust-root /* nút ⏭ trong hộp "Đang dịch video" */
.batch-now .bn-skip {  margin-top: 8px;  }
#tust-root .batch-now .bn-skip .btn.sm {  padding: 7px 11px; font-size: 12.5px;  }
@media (max-width: 720px) { #tust-root .bitem {  flex-wrap: wrap;  }
#tust-root .bitem .bn {  max-width: 100%; order: 5;  }
#tust-root .bitem .bacts {  order: 6; width: 100%; justify-content: flex-start;  }

 }
#tust-root /* ===== TGPro (Telegram login) ===== */
.tgpro-box {  margin-top:10px; display:flex; flex-direction:column; gap:8px;  }
#tust-root .tgpro-status {  padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.15); font-size:13.5px; line-height:1.5;  }
#tust-root #tgproLoginForm, #tust-root #tgCodeRow, #tust-root #tgPassRow {  display:flex; gap:8px;  }
#tust-root #tgproLoginForm input, #tust-root #tgCodeRow input, #tust-root #tgPassRow input {  flex:1;  }
#tust-root /* ===== VOICE PICKER (full 5973 giọng TuTaV) ===== */
.opt-voice {  position: relative;  }
#tust-root .vrate { 
  font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px; margin-left: 6px;
  background: rgba(34,197,94,.14); color: #4ade80; border: 1px solid rgba(34,197,94,.3); vertical-align: 1px;
 }
#tust-root .vrate.paid {  background: rgba(34,211,238,.14); color: var(--pri); border-color: rgba(34,211,238,.35);  }
#tust-root .vpick-btn { 
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: var(--bg2); border: 1px solid var(--line); color: var(--txt); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left; transition: .15s;
 }
#tust-root .vpick-btn:hover {  border-color: var(--pri);  }
#tust-root .vpick-cur {  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
#tust-root .vpick-caret {  color: var(--dim); flex: none;  }
#tust-root .vpick-panel { 
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 90; min-width: 320px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 8px;
 }
#tust-root .vpick-search { 
  background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; color: var(--txt);
  font: inherit; font-size: 13px; padding: 9px 11px; outline: none; width: 100%;
 }
#tust-root .vpick-search:focus {  border-color: var(--pri);  }
#tust-root .vpick-chips {  display: flex; flex-wrap: wrap; gap: 5px;  }
#tust-root .vchip { 
  background: var(--bg2); border: 1px solid var(--line); color: var(--mut); font: inherit; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: .12s; white-space: nowrap;
 }
#tust-root .vchip:hover {  color: var(--txt);  }
#tust-root .vchip.active {  background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.4); color: var(--pri);  }
#tust-root .vpick-list {  max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;  }
#tust-root .vitem { 
  display: flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 9px;
  color: var(--txt); font: inherit; font-size: 13px; padding: 8px 10px; cursor: pointer; text-align: left; transition: .1s;
 }
#tust-root .vitem:hover {  background: var(--card2);  }
#tust-root .vitem.active {  background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.35);  }
#tust-root .vitem .vi-name {  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;  }
#tust-root .vitem .vi-g {  flex: none; font-size: 12px;  }
#tust-root .vitem .vi-g.f {  color: #f472b6;  }
#tust-root .vitem .vi-g.m {  color: #60a5fa;  }
#tust-root .vbadge {  flex: none; font-size: 9.5px; font-weight: 800; border-radius: 6px; padding: 2px 6px; letter-spacing: .3px;  }
#tust-root .vbadge.free {  background: rgba(34,197,94,.13); color: #4ade80;  }
#tust-root .vbadge.vbee {  background: rgba(251,191,36,.13); color: #67e8f9;  }
#tust-root .vbadge.minimax {  background: rgba(52,211,153,.13); color: #34d399;  }
#tust-root .vbadge.elevenlabs {  background: rgba(96,165,250,.13); color: #60a5fa;  }
#tust-root .vbadge.fishaudio {  background: rgba(45,212,191,.13); color: #2dd4bf;  }
#tust-root .vbadge.clone {  background: rgba(192,132,252,.13); color: #c084fc;  }
#tust-root .vbadge.kokoro {  background: rgba(148,163,184,.13); color: #94a3b8;  }
#tust-root .vbadge.unknown {  background: rgba(148,163,184,.13); color: #94a3b8;  }
#tust-root .vitem .vi-warn {  flex: none; font-size: 11px;  }
#tust-root .vpick-note {  font-size: 11px; color: var(--dim); line-height: 1.5; padding-top: 2px;  }
#tust-root .vpick-more {  text-align: center; color: var(--dim); font-size: 12px; padding: 6px;  }
#tust-root .vpick-more:hover {  color: var(--pri);  }
#tust-root .vitem .vi-price {  flex: none; font-size: 10.5px; font-weight: 700; color: var(--dim);  }
#tust-root .vpick-btn.open {  border-color: var(--pri);  }
#tust-root /* ===== CREDIT BAR (số credit thật tiêu tốn mỗi video) ===== */
.credit-bar { 
  margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(34,211,238,.09), rgba(8,145,178,.05));
  border: 1px solid rgba(34,211,238,.25); border-radius: 10px; padding: 8px 12px; font-size: 12.5px;
 }
#tust-root .credit-bar .cb-ico {  font-size: 15px;  }
#tust-root .credit-bar b {  color: var(--pri); font-size: 13.5px;  }
#tust-root .credit-bar .cb-split {  color: var(--dim); font-size: 11.5px;  }
#tust-root .credit-bar.free {  background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25);  }
#tust-root .credit-bar.free b {  color: #4ade80;  }
#tust-root /* ===== FLOW MỚI: giọng đọc nổi bật trong pastebox (dán link → chọn giọng → Tạo) ===== */
.opt.pb-voice {  background: var(--bg2); border: 1px solid var(--line);  }
#tust-root .pb-voice > span {  font-size: 12px;  }
#tust-root /* ===== CHE SUB: control full-width trong bảng style phụ đề ===== */
.st.st-wide {  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;  }
#tust-root .st.st-wide > span {  font-size: 12.5px;  }
#tust-root .st.st-wide input[type="checkbox"] {  width: 20px; height: 20px; accent-color: var(--pri); cursor: pointer;  }
#tust-root /* ===== TỈ LỆ KHUNG THEO VIDEO THẬT — hết bóp méo video dọc 9:16 ===== */
.video-wrap video {  object-fit: contain;  }
#tust-root /* ===== DANH SÁCH LINK ĐÃ DÁN (đếm + xem từng link) ===== */
.link-list {  margin: 8px 0 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);  }
#tust-root .link-list summary { 
  cursor: pointer; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--mut);
  user-select: none; list-style: none;
 }
#tust-root .link-list summary::-webkit-details-marker {  display: none;  }
#tust-root .link-list[open] summary {  color: var(--pri); border-bottom: 1px solid var(--line);  }
#tust-root .link-list-body {  max-height: 180px; overflow-y: auto; padding: 6px 10px;  }
#tust-root .link-row { 
  display: flex; align-items: center; gap: 8px; padding: 4px 4px; font-size: 12px; color: var(--mut);
  border-bottom: 1px dashed rgba(255,255,255,.05);
 }
#tust-root .link-row:last-child {  border-bottom: none;  }
#tust-root .link-row .lr-i { 
  flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--card2);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: var(--pri);
 }
#tust-root .link-row .lr-u {  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left;  }
#tust-root .link-row .lr-tag {  flex: none; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 2px 6px; background: rgba(255,255,255,.06);  }
#tust-root .link-row .lr-tag.chan {  background: rgba(239,68,68,.15); color: #fca5a5;  }
#tust-root .link-row .lr-x { 
  flex: none; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 7px; border-radius: 6px;
  background: transparent; color: var(--mut); border: 1px solid transparent; cursor: pointer; transition: .15s;
 }
#tust-root .link-row .lr-x:hover {  color: #fca5a5; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35);  }
#tust-root /* ===== BATCH NOW: video đang dịch X/N + % thực ===== */
.batch-now { 
  border: 1px solid rgba(59,130,246,.35); background: rgba(59,130,246,.10);
  border-radius: 12px; padding: 12px 14px; margin: 10px 0 4px;
 }
#tust-root .batch-now .bn-top {  display: flex; align-items: center; justify-content: space-between; gap: 10px;  }
#tust-root .batch-now .bn-idx {  font-size: 14.5px; color: #93c5fd;  }
#tust-root .batch-now .bn-pct { 
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--pri), var(--pri2)); border-radius: 9px; padding: 3px 10px;
 }
#tust-root .batch-now .bn-title { 
  margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
#tust-root .batch-now .bn-stage {  margin-top: 3px; font-size: 12px; color: var(--mut);  }
#tust-root /* ===== RESUME BOX: khôi phục phiên hàng loạt sau khi tải lại trang ===== */
.resume-box { 
  margin-top: 18px; border: 1px solid rgba(34,211,238,.35); background: rgba(34,211,238,.07);
  border-radius: 14px; padding: 16px 18px;
 }
#tust-root .resume-box .rb-line {  font-size: 14px; margin-bottom: 6px;  }
#tust-root .resume-box .hint {  margin-bottom: 10px;  }
#tust-root /* ===== mobile: nav pill full-width ===== */
@media (max-width: 720px) { 
  .nav { max-width: none; }
  .nav-btn { font-size: 12px; padding: 7px 6px; gap: 4px; }
  .topbar { gap: 8px; }
  .brand-t b { font-size: 13px; }
 }



#tust-root {
  background: transparent !important;
  color: #0f172a !important;
}
#tust-root .topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  border-radius: 16px 16px 0 0;
}
#tust-root .pastebox, #tust-root .dropzone, #tust-root .pipe-card, #tust-root .set-card, #tust-root .studio-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}
#tust-root textarea, #tust-root input, #tust-root select {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
#tust-root .nav {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
#tust-root .nav-btn {
  color: #64748b !important;
}
#tust-root .nav-btn.active {
  background: #ffffff !important;
  color: #0284c7 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#tust-root .opt-chips .chip {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
#tust-root .opt-chips .chip.active {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  font-weight: 700;
}

/* Mobile responsive fixes for topbar and nav */
@media (max-width: 640px) {
  #tust-root .topbar {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  #tust-root .brand-t b {
    font-size: 12.5px !important;
  }
  #tust-root .nav {
    padding: 2px !important;
    gap: 2px !important;
  }
  #tust-root .nav-btn {
    padding: 4px 7px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  #tust-root .pipe-card {
    margin: 16px auto !important;
    padding: 24px 16px !important;
  }
}