/* Turningline Video & Animation module v1.0.3 */
.tl-video-dashboard{
  margin-top:8px;
}
.tl-video-header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.tl-video-top-layout{
  display:grid;
  grid-template-columns:minmax(380px,1fr) minmax(420px,.82fr);
  gap:18px;
  margin-top:16px;
  align-items:start;
}
.tl-video-form-card,
.tl-video-result-panel,
.tl-video-tool-section,
.tl-video-handoff-demo,
.tl-video-info-card{
  min-width:0;
}
.tl-video-form-card,
.tl-video-result-panel{
  padding:20px;
}
.tl-video-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.tl-video-tabs .tl-tab{
  appearance:none;
  border:1px solid rgba(112,132,190,.34);
  background:rgba(16,27,56,.86);
  color:#dce7ff;
  border-radius:999px;
  min-height:34px;
  padding:0 14px;
  font-weight:900;
  cursor:pointer;
}
.tl-video-tabs .tl-tab.tl-active{
  background:linear-gradient(90deg,#b64cff,#7569ff);
  color:#fff;
  border-color:transparent;
}
.tl-video-options-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.tl-video-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.tl-video-generate-btn{
  min-height:48px;
  padding:0 22px !important;
}
.tl-video-secondary-btn,
.tl-video-card-btn,
.tl-video-chip{
  appearance:none;
  cursor:pointer;
  border-radius:14px;
  font-weight:900;
  transition:transform .16s ease,border-color .16s ease,opacity .16s ease;
}
.tl-video-secondary-btn{
  min-height:48px;
  padding:0 18px;
  color:#eef3ff;
  border:1px solid rgba(121,144,204,.38);
  background:linear-gradient(180deg,rgba(35,48,91,.92),rgba(18,29,62,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.tl-video-secondary-btn:before{
  content:"📋";
  margin-right:8px;
}
.tl-video-secondary-btn:hover,
.tl-video-card-btn:hover,
.tl-video-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(72,219,255,.62);
}
.tl-video-loading{
  margin-top:16px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(52,217,255,.25);
  background:rgba(52,217,255,.06);
  color:#fff;
}
.tl-video-loading[hidden]{
  display:none !important;
}
.tl-video-loading em{
  color:#5df0b0;
  font-style:normal;
  font-weight:900;
}
.tl-video-spinner{
  width:24px;
  height:24px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:#a64cff;
  animation:tlVideoSpin .88s linear infinite;
  flex:0 0 24px;
}
@keyframes tlVideoSpin{ to{ transform:rotate(360deg); } }
.tl-video-note-card{
  margin-top:16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(52,217,255,.18);
  background:rgba(52,217,255,.05);
  color:#c9d4f2;
  line-height:1.55;
}
.tl-video-note-card span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  color:#7fe2ff;
  background:rgba(83,212,255,.12);
  flex:0 0 28px;
}
.tl-video-result-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}
.tl-video-result-head h2{
  margin:0 0 4px;
  color:#fff;
}
.tl-video-result-head p{
  margin:0;
  color:#aebce0;
  font-size:13px;
}
.tl-video-preview-note{
  min-height:160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  border-radius:18px;
  border:1px solid rgba(52,217,255,.18);
  background:radial-gradient(circle at 50% 40%,rgba(52,217,255,.18),transparent 35%),linear-gradient(135deg,rgba(18,34,68,.95),rgba(8,18,39,.98));
  margin-bottom:14px;
  color:#dce7ff;
  padding:18px;
}
.tl-video-play-symbol{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#73dfff;
  font-size:24px;
}
.tl-video-preview-note span{
  color:#aebce0;
  max-width:420px;
}
.tl-video-result-box{
  min-height:360px !important;
  white-space:pre-wrap;
  font-size:15px !important;
  line-height:1.7 !important;
}
.tl-video-status{
  margin-top:10px;
  color:#4ae7a0;
  font-weight:900;
  font-size:13px;
}
.tl-video-tool-section,
.tl-video-handoff-demo{
  margin-top:16px;
  padding:18px;
}
.tl-video-section-kicker{
  margin:0 0 8px;
  color:#d26eff;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.tl-video-section-head h2,
.tl-video-handoff-demo h2{
  margin:0 0 6px;
  color:#fff;
}
.tl-video-section-head p{
  margin:0;
  color:#aebce0;
  font-size:14px;
}
.tl-video-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.tl-video-chip{
  min-height:34px;
  padding:0 12px;
  background:rgba(17,26,51,.9);
  border:1px solid rgba(112,132,190,.32);
  color:#dce6ff;
  font-size:12px;
}
.tl-video-chip.is-active{
  background:linear-gradient(90deg,#7b54ff 0%,#c04fff 100%);
  border-color:transparent;
  color:#fff;
}
.tl-video-tool-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.tl-video-tool-card{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(112,132,190,.32);
  background:linear-gradient(180deg,rgba(25,37,72,.92),rgba(14,22,48,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  text-align:center;
}
.tl-video-tool-card.is-hidden{
  display:none;
}
.tl-video-tool-logo{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  border:1px solid rgba(112,132,190,.32);
  background:linear-gradient(180deg,rgba(35,48,91,.96),rgba(17,27,57,.98));
  color:#fff;
  font-size:30px;
  font-weight:900;
}
.tl-video-tool-card h3{
  margin:0 0 6px;
  color:#fff;
  font-size:16px;
}
.tl-video-tool-tagline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(19,171,151,.22);
  border:1px solid rgba(19,171,151,.30);
  color:#65f0c3;
  font-size:12px;
  font-weight:800;
  margin-bottom:10px;
}
.tl-video-tool-meta{
  color:#d0daf4;
  font-size:13px;
  line-height:1.45;
  min-height:72px;
  margin-bottom:12px;
}
.tl-video-tool-meta span{
  color:#97aacd;
}
.tl-video-card-btn{
  width:100%;
  min-height:40px;
  padding:0 12px;
  color:#fff;
  background:linear-gradient(90deg,#b64cff,#7569ff);
  border:0;
  font-size:14px;
}
.tl-video-handoff-demo{
  display:grid;
  grid-template-columns:minmax(320px,.86fr) minmax(320px,1.14fr);
  gap:16px;
  align-items:stretch;
}
.tl-video-handoff-demo ol{
  margin:10px 0 0 20px;
  color:#d1dbf4;
  line-height:1.8;
}
.tl-video-demo-card{
  border:1px solid rgba(112,132,190,.36);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(19,31,64,.95),rgba(9,16,36,.98));
  padding:18px;
}
.tl-video-demo-card strong{
  display:block;
  color:#fff;
  font-size:16px;
  margin-bottom:12px;
}
.tl-video-demo-card div{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#d4def7;
  line-height:1.5;
  margin-top:10px;
}
.tl-video-demo-card b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:999px;
  color:#041022;
  background:#5df0b0;
  font-size:12px;
}
.tl-video-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.tl-video-info-card{
  padding:18px;
}
.tl-video-info-card h3{
  margin:0 0 8px;
  color:#fff;
}
.tl-video-info-card ol,
.tl-video-info-card ul{
  margin:10px 0 0 20px;
  color:#d1dbf4;
  line-height:1.75;
}
@media(max-width:1220px){
  .tl-video-top-layout,
  .tl-video-handoff-demo{
    grid-template-columns:1fr;
  }
  .tl-video-tool-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:960px){
  .tl-video-options-grid,
  .tl-video-info-grid{
    grid-template-columns:1fr;
  }
  .tl-video-result-head{
    flex-direction:column;
    align-items:stretch;
  }
}
@media(max-width:760px){
  .tl-video-tool-grid{
    grid-template-columns:1fr;
  }
  .tl-video-chip-row{
    overflow:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }
  .tl-video-chip{
    white-space:nowrap;
  }
  .tl-video-action-row,
  .tl-video-action-row button,
  .tl-video-secondary-btn{
    width:100%;
  }
  .tl-video-result-box{
    min-height:280px !important;
  }
}


/* v1.0.3: make Video output readable instead of a narrow long column */
.tl-video-dashboard .tl-video-top-layout{
  grid-template-columns:minmax(360px,.9fr) minmax(560px,1.1fr) !important;
  align-items:start;
}
.tl-video-dashboard .tl-video-result-panel{
  display:flex;
  flex-direction:column;
  max-height:none;
}
.tl-video-dashboard .tl-video-result-head{
  align-items:center;
}
.tl-video-dashboard .tl-video-result-head .tl-video-secondary-btn{
  min-width:120px;
}
.tl-video-dashboard .tl-video-compact-note{
  min-height:auto !important;
  flex-direction:row !important;
  text-align:left !important;
  justify-content:flex-start !important;
  gap:14px !important;
  padding:14px 16px !important;
}
.tl-video-dashboard .tl-video-compact-note .tl-video-play-symbol{
  width:46px;
  height:46px;
  flex:0 0 46px;
  font-size:18px;
}
.tl-video-dashboard .tl-video-compact-note strong,
.tl-video-dashboard .tl-video-compact-note span{
  display:block;
}
.tl-video-dashboard .tl-video-compact-note strong{
  margin-bottom:3px;
}
.tl-video-dashboard .tl-video-result-box{
  min-height:300px !important;
  max-height:430px !important;
  overflow:auto !important;
  padding:18px !important;
  font-size:15px !important;
  line-height:1.65 !important;
}
.tl-video-dashboard .tl-video-quick-open-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.tl-video-dashboard .tl-video-quick-open-row .tl-video-card-btn{
  min-height:42px;
}
.tl-video-dashboard .tl-video-tool-section{
  margin-top:18px;
}
@media(max-width:1500px){
  .tl-video-dashboard .tl-video-top-layout{
    grid-template-columns:1fr !important;
  }
  .tl-video-dashboard .tl-video-result-box{
    max-height:360px !important;
  }
}
@media(max-width:760px){
  .tl-video-dashboard .tl-video-compact-note{
    flex-direction:column !important;
    text-align:center !important;
    align-items:center !important;
  }
  .tl-video-dashboard .tl-video-quick-open-row{
    grid-template-columns:1fr;
  }
}