.tg-mediaToolPage { padding-bottom: 24px; }
.tg-mediaHero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 42px;
  margin: 24px 0;
  padding: clamp(28px, 5vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(120, 230, 205, .2);
  border-radius: 30px;
  background: radial-gradient(circle at 84% 16%, rgba(88,219,187,.2), transparent 31%), linear-gradient(135deg, #0a2030, #123d4b 58%, #10283d);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.tg-mediaHero h1 { max-width: 760px; margin: 10px 0 16px; font-size: clamp(38px, 6vw, 68px); line-height: 1.04; letter-spacing: -.04em; }
.tg-mediaHero p { max-width: 720px; margin: 0; color: #c9d9e3; font-size: clamp(16px, 2vw, 19px); line-height: 1.7; }
.tg-mediaHeroBadges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.tg-mediaHeroBadges span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.06); color: #dffbf3; font-size: 12px; font-weight: 700; }
.tg-mediaHeroArt { position: relative; display: grid; place-items: center; width: 240px; height: 210px; margin: auto; }
.tg-mediaHeroArt span { position: absolute; inset: 12px; border: 2px dashed rgba(198,255,239,.5); border-radius: 28px; background: linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25% 75%, rgba(255,255,255,.05) 75%), linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25% 75%, rgba(255,255,255,.05) 75%); background-position: 0 0, 12px 12px; background-size: 24px 24px; transform: rotate(-5deg); }
.tg-mediaHeroArt i { position: relative; padding: 20px 25px; border-radius: 18px; background: #58dbbb; color: #07151b; font-size: 42px; font-style: normal; font-weight: 900; box-shadow: 0 22px 42px rgba(0,0,0,.28); }
.tg-mediaHeroArt b { position: absolute; right: 10px; bottom: 15px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #ff8070; color: #fff; font-size: 22px; }

.tg-mediaApp { margin: 22px 0; padding: 24px; }
.tg-mediaTabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; padding: 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(0,0,0,.18); }
.tg-mediaTab { min-height: 50px; padding: 10px 16px; border: 0; border-radius: 13px; background: transparent; color: #91a5c1; font-weight: 800; cursor: pointer; transition: color .18s, background .18s, box-shadow .18s; }
.tg-mediaTab.is-active { background: linear-gradient(135deg, rgba(88,219,187,.2), rgba(53,168,223,.18)); color: #f3fffb; box-shadow: inset 0 0 0 1px rgba(88,219,187,.28); }
.tg-mediaTab:disabled { color: #617189; cursor: not-allowed; opacity: .7; }
.tg-mediaTabPanel[hidden] { display: none; }
.tg-mediaTabPanel > form { display: flex; flex-direction: column; min-width: 0; }
.tg-mediaDropzone { display: grid; place-items: center; min-height: 360px; padding: 30px; border: 2px dashed rgba(88,219,187,.44); border-radius: 24px; background: linear-gradient(150deg, rgba(88,219,187,.08), rgba(53,168,223,.05)); text-align: center; transition: .2s ease; cursor: pointer; }
.tg-mediaApp.has-media-file .tg-mediaDropzone { place-content: center; gap: 4px; min-height: 150px; padding: 16px 24px; }
.tg-mediaApp.has-media-file .tg-mediaDropIcon { width: 48px; height: 48px; margin: 0 auto 4px; border-radius: 16px; font-size: 20px; }
.tg-mediaApp.has-media-file .tg-mediaDropzone strong { font-size: 18px; }
.tg-mediaApp.has-media-file .tg-mediaDropzone small { margin-top: 5px; }
.tg-mediaApp.is-conversion-locked .tg-mediaDropzone { pointer-events: none; opacity: .68; }
.tg-mediaDropzone:hover, .tg-mediaDropzone.is-dragover { border-color: #58dbbb; background: rgba(88,219,187,.12); transform: translateY(-2px); }
.tg-mediaDropIcon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 14px; border-radius: 22px; background: linear-gradient(135deg, #58dbbb, #35a8df); color: #07151b; font-size: 27px; font-weight: 900; box-shadow: 0 16px 36px rgba(53,168,223,.2); }
.tg-mediaDropzone strong { font-size: 21px; }
.tg-mediaDropzone > span:not(.tg-mediaDropIcon) { margin-top: 5px; color: #b5c5da; }
.tg-mediaDropzone small { margin-top: 13px; color: #8296b2; }
.tg-mediaFileCard { align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.045); }
.tg-mediaFileCard:not([hidden]) { display: flex; }
.tg-mediaFileCard div { display: grid; min-width: 0; gap: 3px; }
.tg-mediaFileCard strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-mediaFileCard span { color: #91a5c1; font-size: 13px; }
.tg-mediaFileCard button { border: 0; background: transparent; color: #ff9b91; font-weight: 700; }
.tg-mediaSettings { margin-top: 20px; }
.tg-mediaSettings:not([hidden]) { display: flex; flex: 1; flex-direction: column; }
.tg-mediaActionArea { margin-top: 18px; }
.tg-mediaSubmitBtn { position: relative; isolation: isolate; overflow: hidden; min-height: 54px; border-color: rgba(200,255,0,.35); background: linear-gradient(135deg, #c8ff00, #9ee600); color: #071006; }
.tg-mediaSubmitBtn:disabled { cursor: not-allowed; }
.tg-mediaSubmitBtn.is-processing { border-color: rgba(88,219,187,.38); background: #13221d; color: #effff8; opacity: 1; }
.tg-mediaSubmitBtn.tg-mediaSubmitBtn.is-processing:hover,
.tg-mediaSubmitBtn.tg-mediaSubmitBtn.is-processing:focus-visible {
  border-color: rgba(88,219,187,.38);
  background: #13221d;
  color: #effff8;
  box-shadow: 0 10px 26px rgba(0,0,0,.2);
  transform: none;
}
.tg-mediaSubmitFill { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #228d75, #35a8df); transition: width .45s ease; }
.tg-mediaSubmitContent { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.tg-mediaSubmitContent b { font-size: 12px; font-weight: 800; opacity: .82; }
.tg-mediaSubmitContent b:empty { display: none; }
.tg-mediaSubmitSpinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; }
.tg-mediaSubmitBtn.is-processing .tg-mediaSubmitSpinner { display: inline-block; animation: tgMediaSpin .8s linear infinite; }
.tg-mediaSubmitBtn.is-indeterminate .tg-mediaSubmitFill { width: 42%; animation: tgMediaButtonProgress 1.25s ease-in-out infinite; }
.tg-mediaInlineStatus { margin-top: 10px; padding: 12px 14px; border: 1px solid rgba(88,219,187,.16); border-radius: 14px; background: rgba(88,219,187,.055); }
.tg-mediaInlineStatus p { margin: 0; color: #aebed2; font-size: 13px; line-height: 1.5; }
.tg-mediaInlineStatus > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.tg-mediaInlineStatus > div > span { color: #73dfc5; font-size: 12px; font-weight: 800; }
.tg-mediaOptionsGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.tg-mediaOptionsGrid--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tg-mediaOptionsGrid--formatAware.is-still-image { grid-template-columns: minmax(0,1fr); }
.tg-mediaOptionsGrid [hidden] { display: none; }
.tg-mediaOptionsGrid small { display: block; margin-top: 7px; color: #8fa2bd; line-height: 1.45; }
.tg-mediaApp[data-mode="video-to-gif"] .tg-mediaOptionsGrid .tg-field { grid-template-rows: auto 48px auto; align-content: start; }
.tg-mediaApp[data-mode="video-to-gif"] .tg-mediaOptionsGrid .tg-input { align-self: start; width: 100%; height: 48px; min-height: 48px; }
.tg-mediaApp[data-mode="gif-to-mp4"] .tg-mediaOptionsGrid .tg-field { grid-template-rows: auto 48px auto; align-content: start; }
.tg-mediaApp[data-mode="gif-to-mp4"] .tg-mediaOptionsGrid .tg-input { align-self: start; width: 100%; height: 48px; min-height: 48px; }
.tg-mediaMethodSet { min-width: 0; margin: 2px 0 16px; padding: 0; border: 0; }
.tg-mediaMethodSet legend { margin-bottom: 8px; color: #f3f7f0; font-weight: 700; }
.tg-mediaMethodGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.tg-mediaMethod { position: relative; cursor: pointer; }
.tg-mediaMethod input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tg-mediaMethod > span { display: grid; height: 100%; gap: 4px; padding: 14px 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.04); transition: border-color .18s, background .18s, box-shadow .18s; }
.tg-mediaMethod strong { color: #f3f7f0; }
.tg-mediaMethod small { color: #8fa2bd; line-height: 1.4; }
.tg-mediaMethod input:checked + span { border-color: #c8ff00; background: rgba(200,255,0,.09); box-shadow: 0 0 0 3px rgba(200,255,0,.08); }
.tg-mediaMethod input:focus-visible + span { outline: 2px solid #c8ff00; outline-offset: 3px; }
.tg-mediaMethodSet.is-invalid .tg-mediaMethod > span { border-color: #ff8070; }
.tg-mediaMethodError { display: block; margin-top: 9px; color: #ff9b91; font-weight: 700; }
.tg-mediaMethodError[hidden] { display: none; }
.tg-mediaToggleRow { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 4px 0 18px; }
.tg-mediaCheck { display: inline-flex; align-items: center; gap: 9px; color: #dfeaff; font-weight: 700; }
.tg-mediaCheck input { width: 19px; height: 19px; accent-color: #58dbbb; }
.tg-mediaResultPanel { min-height: 360px; margin-top: 20px; overflow: visible; padding: clamp(20px, 4vw, 34px); border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: #0a1727; }
.tg-mediaEmpty, .tg-mediaWorking, .tg-mediaResult { place-self: center; width: 100%; text-align: center; }
.tg-mediaEmpty span { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 18px; border: 1px dashed rgba(88,219,187,.55); border-radius: 25px; color: #58dbbb; font-size: 24px; font-weight: 900; }
.tg-mediaEmpty strong, .tg-mediaWorking > strong, .tg-mediaResult > strong { display: block; font-size: 20px; }
.tg-mediaEmpty p, .tg-mediaWorking p, .tg-mediaResult p, .tg-mediaResult > small { color: #90a4bf; }
.tg-mediaChecker { display: grid; place-items: center; min-height: 260px; margin-bottom: 18px; overflow: hidden; border-radius: 18px; background-color: #dce5e8; background-image: linear-gradient(45deg,#b9c5c9 25%,transparent 25%),linear-gradient(-45deg,#b9c5c9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b9c5c9 75%),linear-gradient(-45deg,transparent 75%,#b9c5c9 75%); background-position: 0 0,0 12px,12px -12px,-12px 0; background-size: 24px 24px; }
.tg-mediaChecker img, .tg-mediaChecker video { display: block; width: auto; max-width: 100%; height: auto; max-height: min(58vh, 520px); object-fit: contain; }
.tg-mediaChecker [hidden] { display: none; }
.tg-mediaResultActions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.tg-mediaSteps { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 22px 0; }
.tg-mediaSteps article { padding: 20px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(255,255,255,.04); }
.tg-mediaSteps span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 11px; background: #58dbbb; color: #07151b; font-weight: 900; }
.tg-mediaSteps strong { font-size: 17px; }
.tg-mediaSteps p { margin: 7px 0 0; color: #9db0c9; line-height: 1.55; }
.tg-mediaIntroContent { margin-top: 28px; }
.tg-mediaToolPage .tg-toolInfoBody a { color: #78ead0; text-decoration: underline; text-underline-offset: 3px; }
@keyframes tgMediaSpin { to { transform: rotate(360deg); } }
@keyframes tgMediaButtonProgress { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(245%); } }

@media (max-width: 900px) {
  .tg-mediaHero { grid-template-columns: 1fr; }
  .tg-mediaHeroArt { display: none; }
  .tg-mediaDropzone { min-height: 320px; }
  .tg-mediaApp.has-media-file .tg-mediaDropzone { min-height: 150px; }
  .tg-mediaOptionsGrid--three { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tg-mediaHero { margin-top: 12px; padding: 26px 20px; border-radius: 22px; }
  .tg-mediaHero h1 { font-size: 38px; }
  .tg-mediaApp { padding: 14px; border-radius: 20px; }
  .tg-mediaTabs { gap: 6px; margin-bottom: 14px; padding: 5px; }
  .tg-mediaTab { min-height: 46px; padding: 8px; font-size: 13px; }
  .tg-mediaDropzone { min-height: 260px; padding: 22px 15px; }
  .tg-mediaApp.has-media-file .tg-mediaDropzone { min-height: 135px; padding: 13px; }
  .tg-mediaDropzone { padding: 22px 15px; }
  .tg-mediaOptionsGrid, .tg-mediaSteps { grid-template-columns: 1fr; }
  .tg-mediaMethodGrid { grid-template-columns: 1fr; }
  .tg-mediaResultPanel { margin-top: 14px; padding: 16px; border-radius: 18px; }
  .tg-mediaInlineStatus > div { align-items: stretch; flex-direction: column; }
  .tg-mediaInlineStatus .tg-secondaryBtn { width: 100%; }
  .tg-mediaResultPanel { min-height: 300px; }
  .tg-mediaChecker { min-height: 210px; }
  .tg-mediaResultActions .tg-primaryBtn, .tg-mediaResultActions .tg-secondaryBtn { width: 100%; }
}