.converter-page { background: #050708; }
.converter-page main { overflow: hidden; }
.converter-page .site-header { background: rgba(3, 6, 7, .96); }
[hidden] { display: none !important; }

.converter-hero { position: relative; min-height: 1050px; padding: 30px 0 105px; overflow: hidden; border-bottom: 1px solid #1c2225; background: #070909; }
.converter-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(66,222,210,.055), transparent 48%), linear-gradient(180deg, transparent 70%, rgba(66,222,210,.02)); pointer-events: none; }
.star-field { position: absolute; inset: 0; opacity: .72; background-image: radial-gradient(circle, rgba(189,255,247,.8) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(175,164,255,.55) 0 1px, transparent 1.3px), radial-gradient(circle, rgba(66,222,210,.65) 0 2px, transparent 2.4px); background-position: 3% 11%, 1% 1%, 1% 1%; background-size: 173px 149px, 251px 211px, 467px 397px; mask-image: linear-gradient(transparent 2%, #000 18%, #000 88%, transparent); }
.breadcrumbs, .converter-intro, .converter-shell, .workflow-trust { position: relative; z-index: 1; }
.breadcrumbs { width: var(--page); margin: 0 auto; display: flex; align-items: center; gap: 8px; color: #758087; font-size: 11px; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs i { width: 14px; }
.breadcrumbs span { color: #a8b0b4; }

.converter-intro { width: min(900px, calc(100% - 32px)); margin: 65px auto 0; text-align: center; }
.converter-intro h1 { margin: 0 0 20px; font-size: 68px; line-height: 1; font-weight: 510; }
.converter-intro p { max-width: 785px; margin: 0 auto; color: #8a9398; font-size: 17px; line-height: 1.45; }
.converter-intro > span { display: block; margin-top: 4px; color: #687278; font-size: 13px; }

.converter-shell { width: min(920px, calc(100% - 32px)); min-height: 440px; margin: 44px auto 0; }
.format-panel { position: relative; min-height: 60px; display: flex; justify-content: center; align-items: flex-start; }
.format-controls { display: grid; grid-template-columns: 170px 48px 170px; align-items: end; gap: 11px; }
.format-controls label > span { display: none; }
.format-controls select { width: 100%; height: 42px; padding: 0 35px 0 14px; border: 1px solid #45494c; border-radius: 7px; color: #ecefee; background: #292b2d; font-size: 13px; font-weight: 600; cursor: pointer; }
.format-controls select:focus { border-color: var(--cyan); outline: none; }
.format-controls option:disabled { color: #666; }
.swap-button { width: 48px; height: 42px; display: grid; place-items: center; border: 0; background: transparent; color: #737b80; cursor: pointer; }
.swap-button:hover:not(:disabled) { color: var(--cyan); }
.swap-button:disabled { opacity: .35; cursor: not-allowed; }
.swap-button i { width: 17px; }
.format-help { position: absolute; top: 45px; left: -12px; width: 245px; margin: 0; color: #6f787d; font-size: 11px; line-height: 1.45; text-align: right; }
.format-help i { position: absolute; top: -8px; right: -72px; width: 68px; height: 36px; color: #626b70; transform: rotate(-22deg); stroke-dasharray: 3 3; }
.mode-switch { position: absolute; top: 96px; right: 2px; display: flex; padding: 3px; border-radius: 8px; background: #151718; }
.mode-switch button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 6px; color: #70787d; background: transparent; font-size: 11px; cursor: pointer; }
.mode-switch button.active { color: #061111; background: var(--cyan); }
.mode-switch span { margin-left: 3px; padding: 1px 4px; border-radius: 5px; color: #081111; background: #c6bfff; font-size: 8px; }

.empty-state { margin-top: 28px; }
.hero-drop-zone { min-height: 330px; padding: 34px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px dashed rgba(66,222,210,.65); border-radius: 10px; background: rgba(66,222,210,.075); cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.hero-drop-zone:hover, .hero-drop-zone.drag-over { border-color: #86fff5; background: rgba(66,222,210,.11); }
.hero-drop-zone.drag-over { transform: scale(1.006); }
.upload-mark { width: 78px; height: 78px; margin-bottom: 23px; display: grid; place-items: center; border-radius: 22px; color: var(--cyan); background: rgba(66,222,210,.14); }
.upload-mark i { width: 34px; height: 34px; stroke-width: 2.8; }
.hero-drop-zone strong { color: #91f8f0; font-size: 17px; font-weight: 540; }
.format-chips { margin-top: 20px; display: flex; align-items: center; gap: 7px; }
.format-chips span { padding: 4px 9px; border: 1px solid rgba(66,222,210,.34); border-radius: 4px; color: #65bdb7; font-family: Consolas, monospace; font-size: 10px; }
.format-chips span:last-child { border-color: transparent; }
.hero-drop-zone small { margin-top: 17px; color: #68918e; font-size: 11px; }
.hero-drop-zone em { margin-top: 20px; display: inline-flex; align-items: center; gap: 7px; color: #7f888d; font-size: 11px; font-style: normal; }
.hero-drop-zone em i { width: 13px; }
.converter-shell.is-empty .format-panel { order: 2; margin-top: 56px; }
.converter-shell.is-empty { display: flex; flex-direction: column; }
.converter-shell.is-empty .empty-state { order: 1; margin-top: 0; }
.converter-shell.is-empty .format-help { display: none; }
.converter-shell.is-empty .mode-switch { display: none; }
.converter-shell.is-empty.formats-ready .format-panel { min-height: 105px; }
.converter-shell.is-empty.formats-ready .mode-switch { top: 55px; right: 50%; display: flex; transform: translateX(50%); }

.single-state { width: 690px; max-width: 100%; margin: 36px auto 0; }
.single-preview-card { padding: 16px 16px 20px; border: 1px solid #373b3d; border-radius: 10px; background: #242627; }
.preview-stage { position: relative; height: 375px; overflow: hidden; border-radius: 6px; background: #080a0c; }
.preview-stage canvas, .preview-stage img { width: 100%; height: 100%; display: block; }
.preview-stage img { object-fit: contain; }
.preview-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; background: #080a0c; color: #889197; font-size: 11px; }
.preview-loading span { width: 28px; height: 28px; border: 2px solid #30373b; border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
.preview-loading p { margin: 10px 0 0; }
.preview-hint { position: absolute; right: 12px; bottom: 12px; padding: 6px 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; color: #8b9499; background: rgba(12,15,17,.8); font-size: 9px; }
.preview-hint i { width: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.single-file-meta { margin-top: 13px; display: grid; justify-items: center; color: #d9ddde; font-size: 11px; }
.single-file-meta span { margin-top: 2px; color: #828a8f; }
.model-stats { margin: 16px 0 0; padding: 0; display: grid; gap: 5px; }
.model-stats div { display: flex; justify-content: space-between; color: #747d82; font-size: 10px; }
.model-stats dt, .model-stats dd { margin: 0; }
.model-stats dd { color: #a6adb1; }
.single-preview-card > .secondary-button { margin: 15px auto 0; }
.single-actions { margin-top: 26px; display: flex; justify-content: center; gap: 12px; }
.primary-button, .secondary-button { min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; font-size: 13px; font-weight: 650; cursor: pointer; }
.primary-button { border: 0; color: #031110; background: var(--cyan); }
.primary-button:hover:not(:disabled) { background: #80f4ec; }
.primary-button:disabled { opacity: .42; cursor: not-allowed; }
.secondary-button { border: 1px solid #45494b; color: #d9dddf; background: #2a2c2e; }
.secondary-button:hover { border-color: #697176; background: #333638; }
.primary-button i, .secondary-button i { width: 16px; }

.batch-state { width: 760px; max-width: 100%; margin: 120px auto 0; }
.batch-drop-zone { min-height: 67px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border: 1px dashed rgba(66,222,210,.65); border-radius: 9px; color: #9efcf4; background: rgba(66,222,210,.085); cursor: pointer; }
.batch-drop-zone span { display: inline-flex; align-items: center; gap: 7px; }
.batch-drop-zone i { width: 18px; }
.batch-drop-zone small { color: #68afa9; }
.batch-list { margin-top: 14px; overflow: hidden; border: 1px solid #353a3d; border-radius: 10px; background: #0d0f10; }
.batch-list:empty { display: none; }
.batch-row { min-height: 67px; padding: 10px 14px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto 30px; align-items: center; gap: 12px; border-bottom: 1px solid #292d2f; }
.batch-row:last-child { border-bottom: 0; }
.batch-format { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 7px; color: #b2b8bb; background: #303335; font-size: 9px; }
.batch-name { min-width: 0; }
.batch-name strong { display: block; overflow: hidden; color: #e0e3e4; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.batch-name span { display: inline-block; margin-top: 4px; padding: 3px 6px; border: 1px solid #34393c; border-radius: 4px; color: #7e878c; font-size: 8px; }
.batch-status { min-width: 68px; display: inline-flex; align-items: center; gap: 6px; color: #858d91; font-size: 10px; }
.batch-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #72797d; }
.batch-row.processing .batch-status::before { border: 1px solid #354044; border-top-color: var(--cyan); background: transparent; animation: spin .8s linear infinite; }
.batch-row.done .batch-status::before { background: #35db8b; }
.batch-row.error .batch-status::before { background: var(--coral); }
.batch-size { color: #686f73; font-size: 10px; }
.batch-icon-button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 5px; color: #aab1b5; background: transparent; cursor: pointer; }
.batch-icon-button:hover { color: #fff; background: #292d2f; }
.batch-icon-button i { width: 15px; }
.batch-summary { min-height: 69px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #6d767b; font-size: 11px; }
.batch-summary > div { display: flex; gap: 10px; }
.batch-summary .primary-button, .batch-summary .secondary-button { min-height: 45px; }

.inline-alert { width: 760px; max-width: 100%; min-height: 47px; margin: 16px auto 0; padding: 10px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,130,111,.45); border-radius: 7px; color: #f2bab0; background: rgba(255,130,111,.08); font-size: 10px; }
.inline-alert > i { width: 16px; color: var(--coral); }
.inline-alert span { flex: 1; }
.inline-alert button { width: 28px; height: 28px; border: 0; color: #b68d87; background: transparent; cursor: pointer; }
.inline-alert button i { width: 14px; }

.workflow-trust { width: min(1050px, calc(100% - 32px)); margin: 80px auto 0; text-align: center; }
.workflow-trust p { margin-bottom: 24px; color: #7c858a; font-size: 14px; }
.workflow-trust > div { display: flex; justify-content: space-between; align-items: center; gap: 25px; color: #d8dcdd; }
.workflow-trust > div span { font-family: Bahnschrift, sans-serif; font-size: 16px; font-weight: 700; white-space: nowrap; }
.workflow-trust small { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; color: #879095; font-size: 11px; }
.workflow-trust small i { width: 15px; color: var(--cyan); }
.workflow-trust small b { color: #3e474b; }

.content-section { width: var(--page); margin: 0 auto; }
.feature-overview { padding: 110px 0; text-align: center; }
.content-section h2 { font-size: 42px; line-height: 1.08; font-weight: 540; }
.feature-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; text-align: left; }
.feature-grid article { min-height: 230px; padding: 30px; border: 1px solid #252b2e; border-radius: 8px; background: #111516; }
.feature-grid i { width: 23px; color: var(--cyan); }
.feature-grid h3 { margin: 60px 0 10px; font-size: 21px; }
.feature-grid p { color: #7e888d; font-size: 12px; line-height: 1.65; }
.popular-section, .detail-section, .steps-section, .faq-section { padding: 105px 0; border-top: 1px solid #202629; }
.section-heading { text-align: center; }
.section-heading > span { color: var(--cyan); font-family: Consolas, monospace; font-size: 9px; }
.section-heading h2 { margin: 13px 0 0; }
.popular-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.popular-grid article { padding-bottom: 28px; overflow: hidden; border: 1px solid #282e31; border-radius: 8px; background: #101415; }
.route-art { height: 190px; display: grid; place-items: center; border-bottom: 1px solid #282e31; background: radial-gradient(circle, rgba(66,222,210,.13), transparent 52%), #0a0d0e; }
.route-art i { width: 58px; height: 58px; color: var(--cyan); stroke-width: 1.2; }
.game-art { background: radial-gradient(circle, rgba(175,164,255,.13), transparent 52%), #0a0d0e; }
.game-art i { color: var(--lavender); }
.ar-art { background: radial-gradient(circle, rgba(255,130,111,.1), transparent 52%), #0a0d0e; }
.ar-art i { color: var(--coral); }
.popular-grid h3, .popular-grid p, .popular-grid article > div:last-child { margin-left: 25px; margin-right: 25px; }
.popular-grid h3 { margin-top: 24px; margin-bottom: 7px; font-size: 20px; }
.popular-grid p { color: #798388; font-size: 11px; }
.popular-grid article > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.popular-grid button { min-height: 29px; padding: 0 9px; border: 1px solid #323a3e; border-radius: 5px; color: #a8b0b4; background: #0b0e0f; font-size: 9px; cursor: pointer; }
.popular-grid button:hover { border-color: var(--cyan); color: var(--cyan); }
.detail-list { margin-top: 55px; }
.detail-list article { min-height: 310px; padding: 45px 5%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; border-top: 1px solid #262c2f; }
.detail-list article:last-child { border-bottom: 1px solid #262c2f; }
.detail-list article > div:first-child { max-width: 460px; }
.detail-list small { color: #596469; font-family: Consolas, monospace; }
.detail-list h3 { margin: 14px 0 12px; font-size: 26px; }
.detail-list p { color: #7c868b; font-size: 13px; line-height: 1.7; }
.format-cloud { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.format-cloud span { min-height: 64px; display: grid; place-items: center; border: 1px solid #343c40; color: #c5cbce; background: #111617; font-family: Consolas, monospace; }
.process-visual { display: flex; align-items: center; justify-content: center; gap: 15px; color: #596469; }
.process-visual > span { width: 105px; height: 105px; display: grid; place-content: center; justify-items: center; gap: 9px; border: 1px solid #343c40; border-radius: 50%; color: #bec5c8; background: #111617; font-size: 11px; }
.process-visual span i { width: 23px; color: var(--cyan); }
.process-visual > i { width: 18px; }
.privacy-visual { min-height: 210px; display: grid; place-content: center; justify-items: center; border: 1px solid #343c40; color: var(--cyan); background: repeating-linear-gradient(0deg, transparent 0 25px, rgba(66,222,210,.035) 25px 26px), #0c1011; }
.privacy-visual i { width: 55px; height: 55px; }
.privacy-visual strong { margin-top: 18px; color: #d8dddf; font-family: Consolas, monospace; }
.privacy-visual span { margin-top: 5px; color: #717c81; font-size: 10px; }
.steps-section ol { margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; list-style: none; background: #252b2e; }
.steps-section li { position: relative; min-height: 270px; padding: 30px; background: #080b0c; }
.steps-section li > b { color: #4e595e; font-family: Consolas, monospace; font-size: 10px; }
.steps-section li > i { width: 26px; margin: 54px 0 18px; display: block; color: var(--cyan); }
.steps-section h3 { font-size: 18px; }
.steps-section p { color: #7c858a; font-size: 11px; line-height: 1.65; }
.faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.faq-section .section-heading { text-align: left; }
.faq-list { border-top: 1px solid #30373a; }
.faq-list details { border-bottom: 1px solid #30373a; }
.faq-list summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #d8dcde; font-size: 13px; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { width: 16px; color: #738087; transition: transform .16s; }
.faq-list details[open] summary i { color: var(--cyan); transform: rotate(45deg); }
.faq-list details p { max-width: 720px; margin: -4px 0 23px; color: #7f898f; font-size: 11px; line-height: 1.7; }

.handoff-overlay { position: fixed; z-index: 300; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(2,4,5,.9); backdrop-filter: blur(12px); }
.handoff-card { width: min(430px,100%); padding: 42px; border: 1px solid #3d464b; border-radius: 8px; background: #121719; text-align: center; box-shadow: 0 30px 90px #000; }
.handoff-card > span { width: 58px; height: 58px; margin: 0 auto 22px; display: grid; place-items: center; border: 1px solid rgba(66,222,210,.4); border-radius: 50%; color: var(--cyan); }
.handoff-card h2 { margin-bottom: 9px; font-size: 25px; }
.handoff-card p { margin-bottom: 24px; color: var(--muted); font-size: 11px; }
.handoff-loader { height: 3px; overflow: hidden; border-radius: 3px; background: #283035; }
.handoff-loader::after { content: ""; display: block; width: 45%; height: 100%; background: var(--cyan); animation: handoff .9s ease-in-out infinite alternate; }
@keyframes handoff { from { transform: translateX(-10%); } to { transform: translateX(135%); } }

@media (max-width: 960px) {
  .converter-intro h1 { font-size: 54px; }
  .workflow-trust > div { flex-wrap: wrap; justify-content: center; }
  .workflow-trust > div span { min-width: 25%; }
  .feature-grid, .popular-grid, .steps-section ol { grid-template-columns: 1fr; }
  .feature-grid article { min-height: 185px; }
  .feature-grid h3 { margin-top: 40px; }
  .detail-list article { grid-template-columns: 1fr; gap: 35px; }
  .faq-section { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .converter-hero { min-height: auto; padding: 23px 0 72px; }
  .breadcrumbs { font-size: 9px; }
  .converter-intro { margin-top: 50px; }
  .converter-intro h1 { font-size: 39px; line-height: 1.05; overflow-wrap: anywhere; }
  .converter-intro p { font-size: 13px; }
  .converter-intro > span { font-size: 9px; line-height: 1.5; }
  .converter-shell { margin-top: 34px; }
  .hero-drop-zone { min-height: 330px; padding: 25px 16px; text-align: center; }
  .hero-drop-zone strong { max-width: 260px; font-size: 15px; line-height: 1.4; }
  .format-chips { flex-wrap: wrap; justify-content: center; }
  .hero-drop-zone em { max-width: 280px; line-height: 1.4; }
  .format-panel { min-height: 128px; }
  .format-controls { grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); width: 100%; gap: 4px; }
  .format-controls select { padding-left: 8px; font-size: 10px; }
  .swap-button { width: 34px; }
  .format-help { display: none; }
  .mode-switch { top: 64px; right: 50%; transform: translateX(50%); }
  .converter-shell.is-empty .format-panel { margin-top: 35px; }
  .preview-stage { height: 310px; }
  .single-actions { flex-wrap: wrap; }
  .batch-state { margin-top: 25px; }
  .batch-drop-zone { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; }
  .batch-row { grid-template-columns: 38px minmax(0,1fr) auto 28px; gap: 8px; }
  .batch-size { display: none; }
  .batch-summary { align-items: stretch; flex-direction: column; padding-top: 14px; }
  .batch-summary > div { flex-wrap: wrap; }
  .batch-summary button { flex: 1; }
  .workflow-trust { margin-top: 60px; }
  .workflow-trust > div span { min-width: 42%; font-size: 12px; }
  .content-section { padding: 72px 0; }
  .content-section h2 { font-size: 32px; }
  .detail-list article { padding: 38px 0; }
  .format-cloud { grid-template-columns: repeat(2,1fr); }
  .process-visual { gap: 5px; }
  .process-visual > span { width: 82px; height: 82px; }
}