:root{
  --tps-bg:#000;
  --tps-panel:rgba(255,255,255,0.06);
  --tps-panel-2:rgba(255,255,255,0.09);
  --tps-border:rgba(255,255,255,0.14);
  --tps-text:#fff;
  --tps-muted:rgba(255,255,255,0.75);
  --tps-accent:#7dd3fc;
  --tps-danger:#fb7185;
  --tps-success:#34d399;
}

.tps-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;color:var(--tps-text)}
.tps-col{flex:1 1 420px;min-width:320px}

.tps-card{
  border:1px solid var(--tps-border);
  border-radius:16px;
  background:var(--tps-panel);
  padding:14px;
  margin-bottom:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.tps-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tps-title{font-size:16px;font-weight:700;letter-spacing:.2px}
.tps-subtitle{font-size:12px;color:var(--tps-muted)}

.tps-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tps-row + .tps-row{margin-top:10px}
.tps-field{flex:1 1 160px;min-width:160px}
.tps-label{display:block;font-size:12px;color:var(--tps-muted);margin:0 0 6px}
.tps-input, .tps-select, .tps-textarea{
  width:100%;
  border:1px solid var(--tps-border);
  background:var(--tps-panel-2);
  color:var(--tps-text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  box-sizing:border-box;
}
.tps-input:focus, .tps-select:focus, .tps-textarea:focus{
  border-color:rgba(125,211,252,.6);
  box-shadow:0 0 0 3px rgba(125,211,252,.18);
}
.tps-textarea{min-height:180px;resize:vertical;line-height:1.35}

/* Make native selects in grids look consistent */
.tps-grid select{
  width:100%;
  border:1px solid var(--tps-border);
  background:var(--tps-panel-2);
  color:var(--tps-text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  box-sizing:border-box;
}
.tps-grid select:focus{
  border-color:rgba(125,211,252,.6);
  box-shadow:0 0 0 3px rgba(125,211,252,.18);
}

/* Improve number inputs (avoid odd spinner overlap on some UAs) */
input[type="number"]{
  -moz-appearance:textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.tps-btn{
  border:1px solid var(--tps-border);
  background:rgba(255,255,255,0.08);
  color:var(--tps-text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}
.tps-btn:hover{background:rgba(255,255,255,0.12)}
.tps-btn:active{transform:translateY(1px)}
.tps-btn[disabled]{opacity:.45;cursor:not-allowed}
.tps-btn-primary{
  border-color:rgba(125,211,252,.5);
  background:rgba(125,211,252,.14);
}
.tps-btn-primary:hover{background:rgba(125,211,252,.2)}
.tps-btn-danger{
  border-color:rgba(251,113,133,.5);
  background:rgba(251,113,133,.14);
}
.tps-btn-danger:hover{background:rgba(251,113,133,.2)}

.tps-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--tps-border);
  background:rgba(255,255,255,0.06);
  color:var(--tps-muted);
}

.tps-prompter{
  border:1px solid var(--tps-border);
  border-radius:16px;
  overflow:hidden;
  background:#000;
  position:relative;
}
.tps-prompter-inner{
  padding:16px;
  color:var(--tps-text);
  font-size:42px;
  line-height:1.4;
  will-change:transform;
}

.tps-watermark{
  position:absolute;top:10px;right:10px;
  padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;color:rgba(255,255,255,.85);
  display:none;
}

/* Camera preview wrapper keeps selected aspect ratio (9:16 / 16:9) */
.tps-video-wrap{
  width:100%;
  border-radius:16px;
  border:1px solid var(--tps-border);
  background:#000;
  overflow:hidden;
  aspect-ratio: 9 / 16;
}
.tps-video-wrap[data-format="16:9"]{ aspect-ratio: 16 / 9; }
.tps-video-wrap[data-format="1:1"]{ aspect-ratio: 1 / 1; }

.tps-video{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

.tps-canvas{
  width:100%;
  height:100%;
  display:block;
  background:#000;
}

.tps-bgvideo-card{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--tps-border);
  border-radius:16px;
  background:rgba(255,255,255,0.05);
}
.tps-bgvideo-title{font-weight:700;color:var(--tps-text);margin-bottom:8px}

.tps-file{
  width:100%;
  color:var(--tps-text);
  font-size:12px;
}

.tps-overlay-settings{
  margin-top:12px;
}
.tps-overlay-settings .tps-grid input[type="number"]{
  max-width:140px;
}

.tps-section-subtitle{font-weight:700;color:var(--tps-text);margin:10px 0 8px}
.tps-grid.tps-grid-2{grid-template-columns:1fr 1fr}

.tps-format{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tps-format-label{font-size:12px;color:var(--tps-muted)}
.tps-radio{display:flex;gap:8px;align-items:center;color:var(--tps-text);font-size:13px}
.tps-radio input{accent-color: rgba(125,211,252,.85);}

.tps-hint{font-size:12px;color:var(--tps-muted);margin-top:8px}
.tps-hint strong{color:var(--tps-text)}

@media (max-width: 780px){
  .tps-col{min-width:100%}
}
.tps-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;margin-bottom:12px}
.tps-tab{
  border:1px solid var(--tps-border);
  background:rgba(255,255,255,0.06);
  color:var(--tps-muted);
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
}
.tps-tab.is-active{
  color:var(--tps-text);
  border-color:rgba(125,211,252,.55);
  background:rgba(125,211,252,.14);
}

.tps-panel{display:none}
.tps-panel.is-active{display:block}

.tps-section-title{font-size:13px;font-weight:700;color:var(--tps-text);margin-bottom:10px}

/* Scroll control layout: keep slider on its own row and prevent overlap with buttons */
.tps-scroll{display:flex;flex-direction:column;gap:10px}
.tps-scroll-label{font-size:12px;color:var(--tps-muted);display:flex;flex-direction:column;gap:6px}
.tps-scroll input[type="range"]{width:100%}
.tps-scroll-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.tps-demo-card .tps-hint{margin-bottom:10px}
.tps-access{display:flex;flex-direction:column;gap:10px}
.tps-access-badge{padding:10px 12px;border:1px solid var(--tps-border);background:var(--tps-panel);border-radius:12px;color:var(--tps-text)}
.tps-access-msg{color:var(--tps-muted);font-size:13px;line-height:1.4}
.tps-yoomoney{margin-top:12px}

.tps-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.tps-grid label{
  font-size:12px;
  color:var(--tps-muted);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tps-grid input[type="number"],
.tps-grid input[type="range"],
.tps-grid input[type="color"]{
  width:100%;
}
.tps-grid input[type="number"],
.tps-grid input[type="range"]{
  border:1px solid var(--tps-border);
  background:var(--tps-panel-2);
  color:var(--tps-text);
  border-radius:12px;
  padding:10px 12px;
}
.tps-grid input[type="color"]{
  height:42px;
  border-radius:12px;
  border:1px solid var(--tps-border);
  background:var(--tps-panel-2);
  padding:4px;
}

.tps-inline{flex-direction:row !important;align-items:center;gap:10px}
.tps-inline input[type="checkbox"]{width:18px;height:18px}

.tps-output-card{padding:0}
.tps-output{
  padding:14px;
  /* Important: make the prompter area scrollable so auto-scroll works */
  height:45vh;
  max-height:45vh;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.tps-output-text{
  margin-bottom:10px;
  /* Preserve user-entered line breaks and blank lines between paragraphs */
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 780px){
  .tps-output{height:36vh;max-height:36vh;}
}

.tps-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:9999;
}
.tps-modal-backdrop.is-open{display:flex}
.tps-modal-card{
  width:min(560px, calc(100vw - 24px));
  border:1px solid var(--tps-border);
  background:rgba(10,10,10,.85);
  border-radius:18px;
  padding:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.6);
}
.tps-modal-title{font-weight:800;margin-bottom:8px}
.tps-modal-text{color:var(--tps-muted);font-size:13px;line-height:1.4}

/* Inline transcription result (under recorded audio preview) */
.tps-transcript{
  margin-top:12px;
  border:1px solid var(--tps-border);
  background:var(--tps-panel);
  border-radius:18px;
  padding:12px;
}
.tps-transcript-title{font-weight:800;margin-bottom:8px}
.tps-transcript-text{
  width:100%;
  min-height:92px;
  resize:vertical;
  border:1px solid var(--tps-border);
  background:var(--tps-panel-2);
  color:var(--tps-text);
  border-radius:14px;
  padding:12px;
  outline:none;
  box-sizing:border-box;
}

/* v19 cosmetics: dark dropdown */
.tps-select{background:#0f1115;color:#fff;border:1px solid rgba(255,255,255,.15);} 
.tps-select option{background:#0f1115;color:#fff;}