:root{
  --bg:#f6f5ff;
  --bg-alt:#ffffff;
  --surface:#ffffff;
  --surface-hover:#f1effe;
  --border:#e6e3fb;
  --border-strong:#d3cdf7;
  --text:#1c1832;
  --text-dim:#6b6580;
  --text-faint:#9a94ad;
  --brand:#6d5ef8;
  --brand-hi:#8577ff;
  --brand-dim:#efecff;
  --brand-ink:#ffffff;
  --accent:#ff8a5c;
  --good:#1fa971;
  --bad:#e5484d;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 2px 8px rgba(30,20,80,0.06);
  --shadow-md:0 12px 32px -12px rgba(30,20,80,0.18);
  --shadow-lg:0 24px 60px -20px rgba(30,20,80,0.28);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
html[data-theme="dark"]{
  --bg:#100e1c;
  --bg-alt:#171429;
  --surface:#1a1730;
  --surface-hover:#221e3d;
  --border:#2c2749;
  --border-strong:#3b3462;
  --text:#f1eefc;
  --text-dim:#a9a2c4;
  --text-faint:#736c8f;
  --brand:#8577ff;
  --brand-hi:#9b8fff;
  --brand-dim:#241f47;
  --brand-ink:#100e1c;
  --accent:#ff9d70;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:0 12px 32px -12px rgba(0,0,0,0.5);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,0.6);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#100e1c; --bg-alt:#171429; --surface:#1a1730; --surface-hover:#221e3d;
    --border:#2c2749; --border-strong:#3b3462; --text:#f1eefc; --text-dim:#a9a2c4;
    --text-faint:#736c8f; --brand:#8577ff; --brand-hi:#9b8fff; --brand-dim:#241f47;
    --brand-ink:#100e1c; --accent:#ff9d70;
    --shadow-sm:0 2px 8px rgba(0,0,0,0.3); --shadow-md:0 12px 32px -12px rgba(0,0,0,0.5);
    --shadow-lg:0 24px 60px -20px rgba(0,0,0,0.6);
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
h1,h2,h3{margin:0 0 .5em; font-weight:800; letter-spacing:-0.02em;}
p{margin:0 0 1em; color:var(--text-dim);}

/* ---------- NAV ---------- */
header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg-alt) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:20px;}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; color:var(--text);}
.brand .mark{
  width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--accent));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:800; flex-shrink:0;
}
.brand-logo{height:28px; width:auto; display:block;}
html[data-theme="dark"] .brand-logo{background:#fff; border-radius:8px; padding:3px 8px;}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo{background:#fff; border-radius:8px; padding:3px 8px;}
}
.navlinks{display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:14.5px; font-weight:600;}
.navlinks a{color:var(--text-dim); transition:color .18s;}
.navlinks a:hover{color:var(--brand);}
@media (max-width:760px){ .navlinks{display:none;} }
.nav-actions{display:flex; align-items:center; gap:10px;}
.theme-toggle{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; transition:border-color .18s, transform .15s;
}
.theme-toggle:hover{border-color:var(--brand); transform:translateY(-1px);}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--sans); font-weight:700; font-size:14.5px; padding:12px 22px; border-radius:100px;
  border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-hi)); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-primary:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;}
.btn-ghost{background:var(--surface); border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand);}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn-block{width:100%; justify-content:center;}

/* ---------- HERO ---------- */
.hero{padding:64px 0 40px; text-align:center;}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--brand);
  background:var(--brand-dim); padding:7px 16px; border-radius:100px; margin-bottom:22px;
}
.hero h1{font-size:clamp(32px,5vw,52px); max-width:16ch; margin:0 auto .4em;}
.hero h1 .accent{background:linear-gradient(135deg,var(--brand),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.lead{font-size:17px; max-width:52ch; margin:0 auto 8px;}
.trust-row{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-top:26px; font-size:13px; color:var(--text-faint); font-weight:600;}
.trust-row span{display:flex; align-items:center; gap:7px;}

/* ---------- SEARCH ---------- */
.tool-search{max-width:480px; margin:32px auto 0; position:relative;}
.tool-search input{
  width:100%; padding:14px 20px 14px 44px; border-radius:100px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-family:var(--sans); font-size:15px; outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.tool-search input:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-dim);}
.tool-search .icon{position:absolute; left:17px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none;}

/* ---------- TOOL GRID ---------- */
.tool-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:40px 0;}
@media (max-width:960px){ .tool-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .tool-grid{grid-template-columns:1fr;} }
.tool-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column; gap:12px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative; overflow:hidden;
}
.tool-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong);}
.tool-card .icon-badge{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:var(--brand-dim);
}
.tool-card h3{font-size:16.5px; margin:0;}
.tool-card p{font-size:13.5px; margin:0; color:var(--text-dim);}
.tool-card .cat{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--text-faint); text-transform:uppercase;}
.tool-card[data-hidden="true"]{display:none;}

/* ---------- SECTION ---------- */
section{padding:56px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 36px;}
.section-head h2{font-size:clamp(24px,3vw,32px);}

/* ---------- TOOL WORKSPACE PAGE ---------- */
.tool-page-head{text-align:center; padding:44px 0 8px;}
.tool-page-head .icon-badge-lg{
  width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:30px; background:var(--brand-dim); margin:0 auto 18px;
}
.tool-page-head h1{font-size:clamp(26px,4vw,36px); margin-bottom:8px;}
.tool-page-head p{max-width:52ch; margin:0 auto;}

.workspace{max-width:720px; margin:24px auto 80px;}
.dropzone{
  border:2px dashed var(--border-strong); border-radius:var(--radius); background:var(--surface);
  padding:48px 24px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s;
}
.dropzone.drag{border-color:var(--brand); background:var(--brand-dim);}
.dropzone .dz-icon{font-size:38px; margin-bottom:14px;}
.dropzone .dz-title{font-size:17px; margin:0 0 6px; font-weight:800; letter-spacing:-0.02em;}
.dropzone p{font-size:13.5px; margin-bottom:0;}
.dropzone input{display:none;}

.file-list{display:flex; flex-direction:column; gap:10px; margin:20px 0;}
.file-row{
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 14px; cursor:grab;
}
.file-row.dragging{opacity:.4;}
.file-row .grip{color:var(--text-faint); font-size:14px; cursor:grab; user-select:none;}
.file-row .thumb{
  width:38px; height:38px; border-radius:8px; background:var(--brand-dim); display:flex; align-items:center;
  justify-content:center; font-size:16px; flex-shrink:0;
}
.file-row .meta{flex-grow:1; min-width:0;}
.file-row .fname{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.file-row .fsize{font-size:12px; color:var(--text-faint); font-family:var(--mono);}
.file-row .row-actions{display:flex; gap:4px; flex-shrink:0;}
.icon-btn{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--bg-alt);
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px;
  transition:border-color .15s, color .15s;
}
.icon-btn:hover{border-color:var(--brand); color:var(--brand);}
.icon-btn.danger:hover{border-color:var(--bad); color:var(--bad);}

.options-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin:20px 0;}
.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:7px;}
.field input[type=text], .field input[type=password], .field input[type=number], .field select{
  width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-alt); color:var(--text); font-family:var(--sans); font-size:14px; outline:none;
}
.field input:focus, .field select:focus{border-color:var(--brand);}
.field .hint{font-size:12px; color:var(--text-faint); margin-top:5px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.radio-row{display:flex; gap:10px; flex-wrap:wrap;}
.radio-chip{
  border:1px solid var(--border); border-radius:100px; padding:8px 16px; font-size:13px; font-weight:600;
  cursor:pointer; background:var(--bg-alt); transition:border-color .15s, background .15s, color .15s;
}
.radio-chip input{display:none;}
.radio-chip.active{border-color:var(--brand); background:var(--brand-dim); color:var(--brand);}
.range-row{display:flex; align-items:center; gap:14px;}
.range-row input[type=range]{flex-grow:1; accent-color:var(--brand);}
.range-row .val{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--brand); min-width:44px; text-align:right;}

.format-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin:4px 0;}
.format-card{
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-alt); padding:14px 12px;
  text-align:center; cursor:pointer; transition:border-color .15s, background .15s, transform .15s;
}
.format-card:hover{border-color:var(--brand-hi); transform:translateY(-1px);}
.format-card.active{border-color:var(--brand); background:var(--brand-dim);}
.format-card .fc-icon{font-size:22px; margin-bottom:6px;}
.format-card .fc-label{font-size:13px; font-weight:700;}
.format-note{font-size:12px; color:var(--text-faint); margin-top:10px; text-align:center;}
.source-hint{font-size:12.5px; color:var(--text-faint); text-align:center; margin-top:14px;}

.page-thumb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; margin:20px 0;}
.page-thumb{
  position:relative; border:2px solid var(--border); border-radius:10px; overflow:hidden; cursor:grab;
  background:var(--bg-alt); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, opacity .15s;
}
.page-thumb canvas, .page-thumb img{width:100%; height:100%; object-fit:contain;}
.page-thumb .pg-num{position:absolute; bottom:4px; left:6px; font-size:10.5px; font-family:var(--mono); background:rgba(0,0,0,0.55); color:#fff; padding:1px 6px; border-radius:100px;}
.page-thumb .pg-remove{position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,0.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer;}
.page-thumb.removed{opacity:.25;}
.page-thumb.dragging{opacity:.35;}
.page-thumb.selected{border-color:var(--brand);}

.progress-wrap{margin:22px 0; display:none;}
.progress-wrap.show{display:block;}
.progress-track{height:8px; border-radius:100px; background:var(--border); overflow:hidden;}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--accent)); border-radius:100px; transition:width .25s ease;}
.progress-label{font-size:12.5px; color:var(--text-dim); margin-top:8px; text-align:center; font-family:var(--mono);}

.result-panel{
  text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 24px; margin:20px 0; display:none;
}
.result-panel.show{display:block;}
.result-panel .icon-badge-lg{background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good);}
.result-panel .result-title{font-size:19px; margin:0 0 .5em; font-weight:800; letter-spacing:-0.02em;}
.result-actions{display:flex; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap;}

.error-banner{
  display:none; background:color-mix(in srgb, var(--bad) 10%, var(--surface)); border:1px solid color-mix(in srgb, var(--bad) 35%, var(--border));
  color:var(--bad); border-radius:var(--radius-sm); padding:13px 16px; font-size:13.5px; margin:16px 0; font-weight:600;
}
.error-banner.show{display:block;}

.privacy-note{
  display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-faint); justify-content:center; margin-top:18px;
}

/* ---------- TOOL CONTENT (how-to / faq / related) ---------- */
.tool-content{padding:52px 0 8px; max-width:720px; margin:0 auto;}
.tool-content h2{font-size:21px; margin:0 0 14px;}
.tool-content h2:not(:first-child){margin-top:44px;}
.tool-content p{font-size:14.5px;}
.howto-list{margin:0 0 8px; padding-left:22px; font-size:14.5px; color:var(--text-dim);}
.howto-list li{margin-bottom:8px;}
.faq-item{margin-bottom:20px;}
.faq-item:last-child{margin-bottom:0;}
.faq-item h3{font-size:15.5px; margin:0 0 6px; font-weight:700;}
.faq-item p{margin:0; font-size:14px;}
.related-tools{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;}
.related-tools a{
  border:1px solid var(--border); border-radius:100px; padding:9px 18px; font-size:13.5px; font-weight:700;
  background:var(--surface); color:var(--text); transition:border-color .15s, color .15s;
}
.related-tools a:hover{border-color:var(--brand); color:var(--brand);}
.conv-table{width:100%; border-collapse:collapse; font-size:13.5px; margin:12px 0 8px;}
.conv-table th, .conv-table td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--border);}
.conv-table th{color:var(--text-faint); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;}

/* ---------- HOW IT WORKS ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:760px){ .steps{grid-template-columns:1fr;} }
.step{text-align:center;}
.step .num{
  width:40px; height:40px; border-radius:50%; background:var(--brand-dim); color:var(--brand); font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-family:var(--mono);
}
.step h3{font-size:16px;}
.step p{font-size:13.5px;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border); padding:40px 0; margin-top:40px;}
.footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; font-weight:600; color:var(--text-dim);}
.footer-links a:hover{color:var(--brand);}
.footer-fine{font-size:12.5px; color:var(--text-faint); margin-top:20px; text-align:center;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- TOAST ---------- */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); z-index:100;
  background:var(--text); color:var(--bg); padding:12px 20px; border-radius:100px; font-size:13.5px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; box-shadow:var(--shadow-md);
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.spinner{
  width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.badge-new{font-size:10px; font-weight:800; background:var(--accent); color:#fff; padding:2px 8px; border-radius:100px; position:absolute; top:14px; right:14px;}