/* All Converter Pro - UI layer v2 (loads after site.min.css). Uses the existing design tokens, so dark mode and RTL follow automatically. */
:root{--ui2-radius:18px;--ui2-card:var(--surface);--ui2-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -12px rgba(16,24,40,.12)}
[data-theme="dark"]{--ui2-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7)}
.wrap{width:100%;max-width:var(--container,1180px);margin-inline:auto;padding-inline:var(--container-pad,1rem)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- header ---------- */
.topbar-inner{gap:.5rem}
.brand strong{font-weight:800;letter-spacing:-.02em}
.top-action{border-radius:999px;padding:.55rem 1.05rem;font-weight:650;box-shadow:var(--sh-brand,0 8px 24px -6px rgba(99,102,241,.5))}
.theme-toggle{border-radius:999px}

/* language switcher */
.lang-switch{position:relative;flex-shrink:0}
.lang-btn{appearance:none;display:inline-flex;align-items:center;gap:.35rem;height:38px;padding:0 .7rem;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;font:inherit;font-size:.8125rem;font-weight:650;cursor:pointer;transition:background .15s,border-color .15s}
.lang-btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + .5rem);z-index:130;min-width:190px;max-height:min(70vh,420px);overflow:auto;margin:0;padding:.35rem;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2xl,0 28px 56px rgba(16,24,40,.25));display:none}
.lang-switch.open .lang-menu{display:block}
.lang-menu a{display:block;padding:.5rem .75rem;border-radius:9px;color:var(--ink);font-size:.9rem;text-decoration:none}
.lang-menu a:hover{background:var(--accent-soft)}
.lang-menu a[aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.lang-banner{display:flex;gap:.75rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:.6rem 1rem;background:var(--accent-soft);color:var(--ink);font-size:.9rem;border-bottom:1px solid var(--line)}
.lang-banner a{color:#fff;background:var(--grad-brand);padding:.3rem .85rem;border-radius:999px;text-decoration:none;font-weight:650}
.lang-banner-x{appearance:none;border:0;background:transparent;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 .3rem}
.footer-langs{display:flex;flex-wrap:wrap;gap:.35rem .5rem;justify-content:center;padding:1rem var(--container-pad,1rem);border-top:1px solid var(--line);max-width:var(--container,1180px);margin-inline:auto}
.footer-langs a{color:var(--muted);font-size:.85rem;padding:.25rem .65rem;border-radius:999px;text-decoration:none}
.footer-langs a:hover{background:var(--accent-soft);color:var(--accent)}

/* ---------- home ---------- */
.home-v2{display:block;padding-bottom:3rem}
.h2-hero{position:relative;overflow:hidden;padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3.5rem);text-align:center;isolation:isolate}
.h2-hero::before,.h2-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55}
.h2-hero::before{width:520px;height:520px;background:#c7d2fe;inset-inline-start:-140px;top:-180px}
.h2-hero::after{width:460px;height:460px;background:#e9d5ff;inset-inline-end:-120px;top:-120px}
[data-theme="dark"] .h2-hero::before{background:#312e81;opacity:.5}
[data-theme="dark"] .h2-hero::after{background:#581c87;opacity:.4}
.h2-hero-inner{max-width:860px}
.h2-eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;padding:.35rem .9rem;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 85%,transparent);border-radius:999px;font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.h2-dot{width:8px;height:8px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 4px rgba(18,183,106,.2)}
.h2-hero h1{font-size:clamp(2.1rem,1.2rem + 4vw,3.6rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 1rem;font-weight:800}
.h2-sub{margin:0 auto 1.75rem;max-width:640px;color:var(--muted);font-size:clamp(1rem,.95rem + .3vw,1.2rem)}
.h2-search{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:.6rem;padding:.35rem .5rem .35rem 1.1rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;box-shadow:var(--ui2-shadow);position:relative;text-align:start}
.h2-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring),var(--ui2-shadow)}
.h2-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.0625rem;color:var(--ink);padding:.8rem .25rem;outline:none}
.h2-search .tool-search-results{inset-inline:0;top:calc(100% + .5rem);text-align:start}
.h2-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1.25rem 0 1.5rem}
.h2-chips a{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .95rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:.9rem;font-weight:550;text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s}
.h2-chips a:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:var(--ui2-shadow)}
.h2-trust{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center;margin:0;padding:0;list-style:none;color:var(--muted);font-size:.875rem}
.h2-trust li::before{content:"";display:inline-block;width:.95em;height:.95em;margin-inline-end:.4rem;vertical-align:-.12em;background:#12b76a;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat}

.h2-section{padding-block:clamp(1.5rem,3vw,2.5rem)}
.h2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.h2-head.center{justify-content:center;text-align:center}
.h2-head h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);margin:0 0 .25rem;letter-spacing:-.025em}
.h2-head p{margin:0;color:var(--muted)}
.h2-head .view-link{font-weight:650;white-space:nowrap}

.h2-popular{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.h2-pop{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;background:var(--ui2-card);border:1px solid var(--line);border-radius:var(--ui2-radius);text-decoration:none;color:inherit;box-shadow:var(--ui2-shadow);transition:transform .18s,border-color .18s,box-shadow .18s}
.h2-pop:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 34px -16px rgba(79,70,229,.45)}
.h2-pop-icon{flex:0 0 52px;height:52px;display:grid;place-items:center;font-size:1.6rem;border-radius:14px;background:var(--accent-soft)}
.h2-pop-body{display:flex;flex-direction:column;min-width:0;flex:1}
.h2-pop-body strong{font-size:1.02rem;letter-spacing:-.01em}
.h2-pop-body small{color:var(--muted);font-size:.85rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h2-pop-go{color:var(--accent);font-weight:700;transition:transform .18s}
.h2-pop:hover .h2-pop-go{transform:translateX(4px)}
[dir=rtl] .h2-pop-go{transform:scaleX(-1)}[dir=rtl] .h2-pop:hover .h2-pop-go{transform:scaleX(-1) translateX(4px)}

.h2-tabs{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem .1rem .75rem;margin-bottom:.5rem;scrollbar-width:thin;position:sticky;top:var(--header-h,60px);z-index:20;background:linear-gradient(var(--bg) 75%,transparent)}
.h2-tabs button{appearance:none;flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s}
.h2-tabs button b{font-weight:700;font-size:.75rem;color:var(--muted);background:var(--surface-3);padding:.05rem .45rem;border-radius:999px}
.h2-tabs button:hover{border-color:var(--accent);color:var(--accent)}
.h2-tabs button.on{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--sh-brand,0 8px 24px -6px rgba(99,102,241,.5))}
.h2-tabs button.on b{background:rgba(255,255,255,.22);color:#fff}
[data-tabhide]{display:none!important}

.tool-grid.h2-grid,.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.tool-card{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1.15rem 1.2rem 1.2rem;background:var(--ui2-card);border:1px solid var(--line);border-radius:var(--ui2-radius);text-decoration:none;color:inherit;box-shadow:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.tool-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 34px -18px rgba(79,70,229,.5)}
.tool-card .card-icon{width:46px;height:46px;display:grid;place-items:center;font-size:1.4rem;border-radius:13px;background:var(--accent-soft);margin-bottom:.4rem}
.tool-card strong{font-size:1.02rem;letter-spacing:-.01em;line-height:1.25}
.tool-card small{color:var(--muted);font-size:.85rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tool-card em{position:absolute;top:.9rem;inset-inline-end:.9rem;font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface-3);padding:.15rem .5rem;border-radius:999px}

.h2-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;list-style:none;margin:0;padding:0;counter-reset:s}
.h2-steps li{padding:1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--ui2-radius)}
.h2-steps li>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--grad-brand);color:#fff;font-weight:800;margin-bottom:.8rem}
.h2-steps h3{font-size:1.05rem;margin:0 0 .3rem}.h2-steps p{margin:0;color:var(--muted);font-size:.92rem}
.h2-why{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.h2-why article{padding:1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--ui2-radius)}
.h2-why article>span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);font-size:1.3rem;margin-bottom:.7rem}
.h2-why h3{font-size:1.02rem;margin:0 0 .3rem}.h2-why p{margin:0;color:var(--muted);font-size:.9rem}
.h2-faq{max-width:820px;margin-inline:auto;display:grid;gap:.6rem}

/* ---------- accordions (home, tool, category) ---------- */
.faq-section details,.h2-faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden}
.faq-section details+details{margin-top:.6rem}
.faq-section summary,.h2-faq summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-weight:650;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq-section summary::-webkit-details-marker,.h2-faq summary::-webkit-details-marker{display:none}
.faq-section summary::after,.h2-faq summary::after{color:var(--accent)}
.faq-section details p,.h2-faq details p{margin:0;padding:0 1.2rem 1.1rem;color:var(--ink-2)}

/* ---------- tool page ---------- */
.v5-tool-page{padding-top:1rem}
.tool-header-panel.v5::before,.tool-header-panel.v5::after{display:none!important}
.tool-header-panel.v5{background:transparent;border:0;box-shadow:none;padding:.75rem 0 1.25rem;display:flex;align-items:center;gap:1.1rem}
.tool-header-panel.v5 .tool-icon-big{flex:0 0 64px;height:64px;display:grid;place-items:center;font-size:2rem;border-radius:18px;background:var(--accent-soft);border:1px solid var(--line)}
.tool-header-panel.v5 h1{font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem);letter-spacing:-.03em;margin:0 0 .3rem}
.tool-header-panel.v5 p{margin:0;color:var(--muted);max-width:720px}
.workspace-card.v5-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(1rem,2.4vw,1.75rem);box-shadow:var(--ui2-shadow)}
.v55-stepper{display:flex;gap:.4rem;overflow-x:auto;margin-bottom:1.25rem;padding-bottom:.25rem}
.v55-stepper span{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.45rem .8rem;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.8125rem;font-weight:600;border:1px solid transparent}
.v55-stepper span b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-3);font-size:.7rem}
.v55-stepper span.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.v55-stepper span.active b{background:var(--accent);color:#fff}
.v55-upload-card{border:0;background:transparent;box-shadow:none;padding:0;max-width:none;text-align:center}
.v55-upload-card .panel-kicker{display:none}
.v55-upload-card h2{font-size:1.3rem;margin-bottom:.35rem}
.v55-upload-card>p{color:var(--muted);max-width:560px;margin:0 auto 1.1rem}
.v55-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-height:220px;padding:2rem 1rem;border:2px dashed var(--line-strong);border-radius:20px;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.v55-dropzone:hover,.v55-dropzone.drag,.v55-dropzone:focus-within{border-color:var(--accent);background:var(--accent-soft)}
.v55-drop-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--grad-brand);color:#fff;font-size:1.6rem;box-shadow:var(--sh-brand,0 8px 24px -6px rgba(99,102,241,.5));margin-bottom:.3rem}
.v55-dropzone strong{font-size:1.15rem}.v55-dropzone small{color:var(--muted)}
.seo-tool-copy{max-width:820px;margin-inline:auto;background:transparent;border:0;box-shadow:none;padding-inline:0}
.seo-tool-copy h2{font-size:1.35rem;margin-top:1.6rem}
.seo-tool-copy p,.seo-tool-copy li{color:var(--ink-2);line-height:1.75}
.faq-section{max-width:820px;margin-inline:auto;background:transparent;border:0;box-shadow:none;padding-inline:0}
.related-panel{max-width:1000px;margin-inline:auto;background:transparent;border:0;box-shadow:none}
.pill-tools a{border-radius:999px}
.breadcrumbs{font-size:.85rem;color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface-2);margin-top:3rem}
.footer-bottom-v60{text-align:center}

/* ---------- responsive ---------- */
@media (max-width:980px){.h2-popular{grid-template-columns:repeat(2,minmax(0,1fr))}.h2-why{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .h2-popular,.h2-steps,.h2-why{grid-template-columns:1fr}
  .tool-grid.h2-grid,.tool-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .tool-card{padding:.9rem}.tool-card small{-webkit-line-clamp:2}.tool-card em{display:none}
  .h2-search input{font-size:1rem}
  .h2-head{flex-direction:column;align-items:flex-start}
  .tool-header-panel.v5{align-items:flex-start}
  .lang-btn .lang-cur{display:none}.lang-btn{padding:0 .6rem}
}
@media (max-width:380px){.tool-grid.h2-grid,.tool-grid{grid-template-columns:1fr}}

/* ---------- scripts that need a different font stack ---------- */
html[lang=zh] body{font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",sans-serif;line-height:1.75}
html[lang=hi] body{font-family:system-ui,-apple-system,"Segoe UI","Nirmala UI","Noto Sans Devanagari","Mangal",sans-serif;line-height:1.75}
html[lang=ru] h1,html[lang=de] h1,html[lang=tr] h1,html[lang=id] h1,html[lang=pt] h1,html[lang=fr] h1,html[lang=es] h1{letter-spacing:-.025em}
html[lang=de] .h2-hero h1{hyphens:auto;-webkit-hyphens:auto}
html[lang=zh] h1,html[lang=zh] h2,html[lang=zh] h3,html[lang=hi] h1,html[lang=hi] h2,html[lang=hi] h3{letter-spacing:0}

/* ---------- compact (hamburger) header for mid-size screens, so long translated menu labels never collide ---------- */
@media (max-width:1439px) and (min-width:901px){
  .menu-toggle{display:grid;place-items:center}
  .top-action{display:none}
  .topbar-inner{position:relative}
  .menu-toggle{margin-inline:auto 0}
  .main-menu{position:absolute;top:calc(var(--header-h,60px) + .5rem);inset-inline:var(--container-pad,1rem);flex-direction:column;align-items:stretch;gap:.15rem;margin:0;padding:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,16px);box-shadow:var(--sh-2xl,0 28px 56px rgba(16,24,40,.25));display:none;max-height:75vh;overflow-y:auto}
  .main-menu.open{display:flex}
  .nav-item{display:block;width:100%}
  .nav-trigger,.nav-link-plain{width:100%;justify-content:space-between;padding:.75rem .8rem}
  .nav-dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;border:0;background:var(--surface-2);margin:.15rem 0 .4rem;padding:.35rem}
  .nav-item.open>.nav-dropdown-menu{display:block}
  .nav-item:hover>.nav-dropdown-menu{display:none}
  .nav-item.open:hover>.nav-dropdown-menu{display:block}
}