:root{
  --tool-night:#0b1020;
  --tool-night-2:#151d35;
  --tool-paper:#f4f0e7;
  --tool-paper-2:#fbfaf6;
  --tool-ink:#151a27;
  --tool-muted:#626876;
  --tool-line:rgba(21,26,39,.13);
  --tool-lime:#c9ff63;
  --tool-violet:#8176ff;
  --tool-cyan:#58dcc5;
}
[hidden]{display:none!important}

body.qm-tool-page{background:var(--tool-paper)!important;color:var(--tool-muted)!important}
body.qm-tool-page main{background:var(--tool-paper)!important}
body.qm-tool-page .tool-page-hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(4.6rem,8vw,7.4rem) 1.25rem clamp(4.2rem,7vw,6.5rem)!important;
  color:#fff!important;
  background:
    radial-gradient(660px 390px at 84% 28%,rgba(129,118,255,.34),transparent 70%),
    radial-gradient(470px 310px at 26% 110%,rgba(88,220,197,.13),transparent 72%),
    linear-gradient(135deg,#080d1b,#10162d 60%,#19183a)!important;
  border:0!important;
}
body.qm-tool-page .tool-page-hero::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 78%);
  mask-image:radial-gradient(circle at 50% 42%,#000,transparent 78%);
}
body.qm-tool-page .tool-page-hero .container{position:relative;z-index:1;max-width:900px!important}
body.qm-tool-page .qm-tool-breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 20px;color:#aeb6c8;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
body.qm-tool-page .qm-tool-breadcrumb a{color:var(--tool-lime);text-decoration:none}
body.qm-tool-page .qm-tool-breadcrumb i{width:4px;height:4px;background:rgba(255,255,255,.4);border-radius:50%}
body.qm-tool-page .tool-page-hero h1{
  margin:0 0 1.25rem!important;color:#fff!important;background:none!important;
  -webkit-text-fill-color:#fff!important;font-size:clamp(2.65rem,6vw,5.25rem)!important;
  font-weight:800!important;line-height:.96!important;letter-spacing:-.065em!important;text-wrap:balance;
}
body.qm-tool-page .tool-page-hero p{max-width:720px!important;margin-inline:auto!important;color:#bec4d1!important;font-size:clamp(1rem,1.25vw,1.18rem)!important;line-height:1.7!important;text-wrap:pretty}
body.qm-tool-page .qm-tool-proof{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:26px}
body.qm-tool-page .qm-tool-proof span{padding:8px 11px;color:#e2e6ef;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:9px;font-size:11px;font-weight:800}
body.qm-tool-page .qm-tool-proof span:first-child{color:var(--tool-lime);border-color:rgba(201,255,99,.25);background:rgba(201,255,99,.07)}

body.qm-tool-page .tool-content-section{padding:clamp(3.5rem,7vw,6.5rem) 0!important;background:var(--tool-paper)!important}
body.qm-tool-page .tool-content-section>.container{max-width:1120px!important}
body.qm-tool-page .tool-interface,
body.qm-tool-page .results-section,
body.qm-tool-page .content-block,
body.qm-tool-page .faq-item{
  color:var(--tool-muted)!important;background:var(--tool-paper-2)!important;border:1px solid var(--tool-line)!important;
  box-shadow:none!important;
}
body.qm-tool-page .tool-interface{position:relative;padding:clamp(1.35rem,3.5vw,2.55rem)!important;border-radius:28px!important;box-shadow:0 24px 70px rgba(12,17,31,.10)!important}
body.qm-tool-page .tool-interface::before{content:"Private workspace";display:inline-flex;margin-bottom:20px;padding:7px 10px;color:#5d52ca;background:#e9e5ff;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
body.qm-tool-page .tool-interface h2,
body.qm-tool-page .content-block h2,
body.qm-tool-page .content-block h3,
body.qm-tool-page .faq-question,
body.qm-tool-page .result-card h4,
body.qm-tool-page .compression-option h4{color:var(--tool-ink)!important}
body.qm-tool-page .tool-interface h2{font-size:clamp(1.55rem,3vw,2.15rem)!important;letter-spacing:-.035em!important}
body.qm-tool-page .content-block{padding:clamp(1.4rem,3vw,2.25rem)!important;border-radius:22px!important}
body.qm-tool-page .content-block p,
body.qm-tool-page .content-block li,
body.qm-tool-page .faq-answer,
body.qm-tool-page .compression-option p{color:var(--tool-muted)!important}

body.qm-tool-page :is(.drag-drop-area,.drop-area,.drop-zone,.upload-area,.upload-zone,.file-drop-zone){
  position:relative;min-height:190px;padding:2.3rem 1.25rem!important;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--tool-muted)!important;background:linear-gradient(145deg,#f7f4ed,#fff)!important;
  border:1.5px dashed #aaa3b7!important;border-radius:18px!important;cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease!important;
}
body.qm-tool-page :is(.drag-drop-area,.drop-area,.drop-zone,.upload-area,.upload-zone,.file-drop-zone)::before{
  content:"+";width:48px;height:48px;margin-bottom:12px;display:grid;place-items:center;color:#fff;background:var(--tool-violet);border-radius:14px;font-size:25px;font-weight:500;box-shadow:0 10px 26px rgba(129,118,255,.23)
}
body.qm-tool-page :is(.drag-drop-area,.drop-area,.drop-zone,.upload-area,.upload-zone,.file-drop-zone):hover,
body.qm-tool-page :is(.drag-drop-area,.drop-area,.drop-zone,.upload-area,.upload-zone,.file-drop-zone).active,
body.qm-tool-page :is(.drag-drop-area,.drop-area,.drop-zone,.upload-area,.upload-zone,.file-drop-zone).is-dragover{
  transform:translateY(-2px);background:#fff!important;border-color:var(--tool-violet)!important;box-shadow:0 16px 38px rgba(34,29,76,.10)!important
}
body.qm-tool-page [data-qm-file-ready="true"]{border-style:solid!important;border-color:rgba(46,121,91,.42)!important;background:#f4fbf7!important}
body.qm-tool-page [data-qm-file-ready="true"]::before{content:"✓";background:#2e795b}
body.qm-tool-page :is(.drag-drop-area,.drop-area,.drop-zone,.upload-area,.upload-zone,.file-drop-zone) p{color:var(--tool-ink)!important;font-weight:800!important}
body.qm-tool-page :is(.drag-drop-area,.drop-area,.drop-zone,.upload-area,.upload-zone,.file-drop-zone) :is(.small,small){color:var(--tool-muted)!important}

body.qm-tool-page :is(input:not([type=file]):not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea,.data-editor){
  min-height:48px;padding:11px 13px!important;color:var(--tool-ink)!important;background:#fff!important;border:1px solid #c9c2b7!important;border-radius:11px!important;font:650 14px/1.45 Inter,system-ui,sans-serif!important;box-shadow:none!important
}
body.qm-tool-page textarea,body.qm-tool-page .data-editor{min-height:150px}
body.qm-tool-page :is(input,select,textarea,.data-editor):focus{outline:3px solid rgba(129,118,255,.18)!important;border-color:var(--tool-violet)!important}
body.qm-tool-page input[type=range]{accent-color:var(--tool-violet)!important}
body.qm-tool-page :is(.option-group,.compression-option,.format-option,.result-card,.file-item,.info-box,.settings-panel,.output-section){background:rgba(255,255,255,.62)!important;border-color:var(--tool-line)!important;border-radius:14px!important}
body.qm-tool-page :is(.compression-option,.format-option).active{background:#efecff!important;border-color:var(--tool-violet)!important;box-shadow:0 0 0 3px rgba(129,118,255,.10)!important}

body.qm-tool-page :is(.tool-btn,.download-btn,.submit-btn,.primary-btn){
  min-height:50px!important;color:var(--tool-night)!important;background:var(--tool-lime)!important;border:1px solid rgba(11,16,32,.08)!important;border-radius:12px!important;
  box-shadow:0 12px 30px rgba(130,160,54,.14)!important;font-weight:850!important;letter-spacing:-.01em!important
}
body.qm-tool-page :is(.tool-btn,.download-btn,.submit-btn,.primary-btn):hover:not(:disabled){background:#d5ff84!important;transform:translateY(-2px)!important;box-shadow:0 15px 34px rgba(130,160,54,.2)!important}
body.qm-tool-page :is(.tool-btn,.download-btn,.submit-btn,.primary-btn):disabled{opacity:.48!important;filter:saturate(.35);cursor:not-allowed!important}
body.qm-tool-page .progress-bar{background:#e1ddd4!important;border-radius:999px!important;overflow:hidden}
body.qm-tool-page .progress-fill{background:linear-gradient(90deg,var(--tool-violet),var(--tool-cyan))!important}
body.qm-tool-page .status-message{border-radius:11px!important}
body.qm-tool-page .results-section{padding:clamp(1.4rem,3vw,2.25rem)!important;border-radius:22px!important;box-shadow:0 20px 55px rgba(12,17,31,.08)!important}
body.qm-tool-page .faq-item{border-radius:14px!important;overflow:hidden}
body.qm-tool-page .faq-question:hover{background:rgba(129,118,255,.06)!important}

@media(max-width:700px){
  body.qm-tool-page .tool-page-hero{padding:3.65rem 1rem 3.8rem!important}
  body.qm-tool-page .tool-page-hero h1{font-size:clamp(2.5rem,12vw,3.85rem)!important}
  body.qm-tool-page .qm-tool-proof{gap:6px}
  body.qm-tool-page .qm-tool-proof span{font-size:10px}
  body.qm-tool-page .tool-content-section{padding:2.7rem 0!important}
  body.qm-tool-page .tool-content-section>.container{padding-inline:14px!important}
  body.qm-tool-page .tool-interface{border-radius:20px!important}
  body.qm-tool-page :is(.drag-drop-area,.drop-area,.drop-zone,.upload-area,.upload-zone,.file-drop-zone){min-height:172px;padding:1.8rem 1rem!important}
}

@media(prefers-reduced-motion:reduce){body.qm-tool-page *{scroll-behavior:auto!important}}

body.qm-tool-page :is(button,a)[id*="download" i],body.qm-tool-page :is(.download-btn,.download-button,.btn-download),body.qm-tool-page a[download]{color:#fff!important;background:#121b32!important;border-color:#121b32!important;box-shadow:0 12px 28px rgba(11,16,32,.20)!important;-webkit-text-fill-color:#fff!important}
body.qm-tool-page :is(button,a)[id*="download" i]:hover:not(:disabled),body.qm-tool-page :is(.download-btn,.download-button,.btn-download):hover:not(:disabled),body.qm-tool-page a[download]:hover{color:#fff!important;background:#24304f!important;border-color:#24304f!important;box-shadow:0 16px 34px rgba(11,16,32,.28)!important}
