/* Shared styles for the SmartUs free online tools (/tools/*) */
:root{
  --bg:#ffffff; --surface:#f5f6fb; --ink:#101528; --muted:#59627a; --border:#e6e8f2;
  --brand:#5b4bff; --brand-2:#10b3a6; --brand-ink:#4b3ce6; --ok:#0f8a5f; --err:#c2342b;
  --radius:16px; --maxw:880px;
  --grad:linear-gradient(135deg,var(--brand),var(--brand-2));
  --shadow:0 1px 2px rgba(16,21,40,.05),0 18px 40px -18px rgba(16,21,40,.25);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#090c18; --surface:#0e1326; --ink:#eef0fb; --muted:#9aa2c0; --border:#222a49;
  --brand:#8b7dff; --brand-2:#2ad0c2; --brand-ink:#9d92ff; --ok:#3fd19a; --err:#ff7b72;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.15;margin:0 0 .5rem}
h1{font-size:clamp(1.7rem,4.5vw,2.5rem);letter-spacing:-.01em}
h2{font-size:1.35rem;margin-top:2.2rem}
a{color:var(--brand-ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
header{border-bottom:1px solid var(--border);background:var(--bg)}
.nav{display:flex;align-items:center;justify-content:space-between;height:58px;gap:12px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.1rem;text-decoration:none;color:var(--ink)}
.logo svg{width:26px;height:26px}
.nav-r{display:flex;gap:16px;font-size:.95rem}
.nav-r a{color:var(--muted);text-decoration:none;font-weight:600}
.nav-r a:hover{color:var(--ink)}
.hero{padding:28px 0 8px}
.lead{color:var(--muted);font-size:1.08rem;margin:0 0 .6rem}
.private{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ok);font-size:.95rem;margin:.2rem 0 1rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.drop{border:2px dashed var(--border);border-radius:var(--radius);padding:34px 16px;text-align:center;cursor:pointer;background:var(--bg);transition:border-color .15s}
.drop.over,.drop:hover{border-color:var(--brand)}
.drop strong{display:block;font-size:1.1rem;margin-bottom:4px}
.drop small{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;border:none;cursor:pointer;
  padding:13px 22px;border-radius:12px;color:#fff;background:var(--grad);text-decoration:none;box-shadow:var(--shadow)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--brand-ink);border:1.5px solid var(--border);box-shadow:none}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.files{list-style:none;padding:0;margin:14px 0 0}
.files li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;margin-bottom:6px;background:var(--bg);font-size:.95rem}
.files li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files button{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:8px;padding:4px 9px;cursor:pointer}
select,label{font-size:.95rem}
select{padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
.status{margin-top:12px;font-size:.95rem;color:var(--muted);min-height:1.4em}
.status.ok{color:var(--ok)} .status.err{color:var(--err)}
progress{width:100%;height:10px;margin-top:10px;accent-color:var(--brand)}
.result{margin-top:14px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare figure{margin:0} .compare img,.compare canvas{width:100%;height:auto;border-radius:10px;border:1px solid var(--border);image-rendering:auto}
.compare figcaption{font-size:.85rem;color:var(--muted);text-align:center}
@media (max-width:560px){.compare{grid-template-columns:1fr}}
textarea{width:100%;min-height:200px;font:13px/1.45 ui-monospace,Consolas,monospace;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
.upsell{margin-top:18px;border:1.5px solid var(--brand);border-radius:var(--radius);padding:18px;background:var(--bg);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.upsell div{flex:1 1 260px}
.upsell h3{font-size:1.1rem}
.upsell p{margin:.2rem 0;color:var(--muted)}
.upsell img{display:block}
.upsell .alt{font-size:.9rem;margin-top:6px}
ol.how{padding-left:1.2rem} ol.how li{margin:.3rem 0}
details{border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin:8px 0;background:var(--surface)}
summary{cursor:pointer;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.grid a{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.grid a:hover{border-color:var(--brand)}
.grid a b{display:block;margin-bottom:4px}
.grid a span{color:var(--muted);font-size:.93rem}
footer{margin-top:48px;border-top:1px solid var(--border);padding:22px 0 40px;color:var(--muted);font-size:.9rem}
footer a{color:var(--muted);margin-right:14px}

/* ---- v2: category pages (several tools per page) ---- */
:root{--maxw:1000px}
.ico{width:48px;height:48px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px -10px rgba(16,21,40,.55)}
.ico svg{width:28px;height:28px}
.ico.pdf{background:linear-gradient(135deg,#ff5a4e,#d81b60)} .ico.merge{background:linear-gradient(135deg,#ff8a3d,#e8453c)}
.ico.icon{background:linear-gradient(135deg,#7b61ff,#4b3ce6)} .ico.enh{background:linear-gradient(135deg,#00b4d8,#5b4bff)}
.ico.bg{background:linear-gradient(135deg,#10b3a6,#0a7f9e)} .ico.social{background:linear-gradient(135deg,#f72585,#ff9e00)}
.ico.sub{background:linear-gradient(135deg,#5b4bff,#10b3a6)}
.toolnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:8px 0 6px}
.toolnav a{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.toolnav a:hover{border-color:var(--brand)}
.toolnav b{display:block} .toolnav span{color:var(--muted);font-size:.9rem;line-height:1.35}
section.tool{padding-top:26px;scroll-margin-top:8px}
.tool-h{display:flex;gap:14px;align-items:center;margin:0 0 6px}
.tool-h h2{margin:0}
.tool-h p{margin:.15rem 0 0;color:var(--muted)}
.tool>.card{margin-top:12px}
.opts{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:12px 0 0}
.opts label{display:inline-flex;gap:6px;align-items:center}
input[type=color]{width:38px;height:30px;padding:0;border:1px solid var(--border);border-radius:6px;background:none}
input[type=range]{accent-color:var(--brand)}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.seg button{border:none;background:var(--bg);color:var(--ink);padding:7px 12px;cursor:pointer;font:inherit;font-size:.92rem}
.seg button+button{border-left:1px solid var(--border)}
.seg button.on{background:var(--brand);color:#fff}
.checker{background-color:#fff;background-image:linear-gradient(45deg,#d9dce6 25%,transparent 25%,transparent 75%,#d9dce6 75%),linear-gradient(45deg,#d9dce6 25%,transparent 25%,transparent 75%,#d9dce6 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.preview{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--border);display:block}
.sizes{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-top:12px}
.sizes figure{margin:0;text-align:center;font-size:.8rem;color:var(--muted)}
.sizes canvas{display:block;margin:0 auto 4px}
.promo{margin-top:40px;border-radius:22px;padding:26px;background:var(--grad);color:#fff;display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.promo div{flex:1 1 300px}
.promo h2{margin:0 0 .4rem;color:#fff}
.promo p{margin:.25rem 0;opacity:.95}
.promo ul{margin:.4rem 0;padding-left:1.1rem}
.promo a{color:#fff}
.promo img{display:block}
.btn.sm{padding:8px 14px;font-size:.92rem;border-radius:10px}

/* PDF editor */
.ed{display:grid;grid-template-columns:150px 1fr;gap:12px;margin-top:12px}
.thumbs{max-height:72vh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}
.thumb{background:var(--bg);border:2px solid var(--border);border-radius:10px;padding:6px;cursor:pointer;text-align:center;font-size:.8rem;color:var(--muted)}
.thumb.on{border-color:var(--brand)}
.thumb canvas{max-width:100%;height:auto;display:block;margin:0 auto 4px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.thumb .tb{display:flex;justify-content:center;gap:3px;margin-top:3px}
.thumb .tb button{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:6px;padding:2px 6px;cursor:pointer;font-size:.8rem}
.toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.toolbar button.t{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:9px;padding:7px 10px;cursor:pointer;font:inherit;font-size:.9rem}
.toolbar button.t svg{width:18px;height:18px}
.toolbar button.t.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.stage{position:relative;overflow:auto;max-height:78vh;background:#80869a33;border-radius:10px;padding:10px}
.pagebox{position:relative;margin:0 auto;box-shadow:0 2px 10px rgba(0,0,0,.25);background:#fff}
.pagebox canvas{display:block;width:100%;height:100%}
.layer{position:absolute;inset:0;touch-action:none}
.layer.pen,.layer.box,.layer.text{cursor:crosshair}
.ann{position:absolute;transform-origin:0 0}
.ann.sel{outline:2px dashed var(--brand);outline-offset:2px}
.ann .txt{white-space:pre;outline:none;font-family:Helvetica,Arial,sans-serif;line-height:1.15;min-width:8px}
.ann img{width:100%;height:100%;display:block;pointer-events:none}
.ann .h{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;border-radius:50%;background:var(--brand);border:2px solid #fff;cursor:nwse-resize;display:none}
.ann .x{position:absolute;right:-10px;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--err);color:#fff;border:none;cursor:pointer;font-size:12px;line-height:22px;padding:0;display:none}
.ann.sel .h,.ann.sel .x{display:block}
.ann svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.ann.locked{pointer-events:none;opacity:.85}
.modal{position:fixed;inset:0;background:rgba(9,12,24,.6);display:grid;place-items:center;z-index:50;padding:16px}
.modal[hidden]{display:none}
.modal .box{background:var(--bg);border-radius:16px;padding:18px;width:min(520px,100%)}
.modal canvas{width:100%;height:180px;border:1px dashed var(--border);border-radius:10px;background:#fff;touch-action:none;display:block}
.modal input[type=text]{width:100%;padding:10px;font-size:1rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
@media (max-width:700px){
  .ed{grid-template-columns:1fr}
  .thumbs{flex-direction:row;max-height:none;overflow-x:auto;padding-bottom:4px}
  .thumb{flex:0 0 108px}
  .toolbar button.t span{display:none}
}