:root { --bg:#f5f7fb; --card:#fff; --ink:#0f172a; --mut:#64748b; --line:#e2e8f0; --acc:#2563eb; --acc2:#1d4ed8; --soft:#eff6ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--acc); }
.wrap { max-width:1080px; margin:0 auto; padding:0 16px; }

/* header / footer */
.top { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.top .wrap { display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand { font-weight:700; font-size:18px; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px; }
.brand i { display:inline-block; width:26px; height:26px; border-radius:7px; background:var(--acc); position:relative; }
.brand i::after { content:""; position:absolute; inset:6px; border:2px solid #fff; border-radius:3px; }
.top nav a { margin-left:18px; color:var(--mut); text-decoration:none; font-size:14px; }
.top nav a:hover { color:var(--ink); }
footer { margin-top:48px; padding:28px 0; background:var(--card); border-top:1px solid var(--line); color:var(--mut); font-size:13px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; }
footer a { color:var(--mut); margin-right:16px; }

/* hero */
.hero { text-align:center; padding:36px 0 18px; }
.hero h1 { margin:0 0 8px; font-size:clamp(26px,4.5vw,40px); line-height:1.15; letter-spacing:-.02em; }
.hero p { margin:0 auto; max-width:640px; color:var(--mut); font-size:16px; }
.badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.badges span { background:var(--soft); color:var(--acc2); border-radius:99px; padding:3px 12px; font-size:12.5px; font-weight:600; }

/* layout with ad rails */
.layout { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
@media (min-width:1360px) { .layout { grid-template-columns:160px minmax(0,1fr) 160px; max-width:1420px; margin:0 auto; padding:0 12px; } }
.rail { display:none; }
@media (min-width:1360px) { .rail { display:block; } .rail .ad-slot { position:sticky; top:76px; } }

/* ad slots: invisible unless configured (add ?adpreview to the URL to see placeholders) */
.ad-slot { display:none; text-align:center; margin:14px auto; overflow:hidden; }
.ad-slot.on { display:block; }
.ad-slot.preview { display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 10px,#e8eef6 10px,#e8eef6 20px); border:1px dashed #94a3b8; color:#64748b; font-size:12px; }
.ad-h { min-height:90px; } .ad-r { width:160px; min-height:600px; } .ad-s { min-height:250px; }
.ad-label { display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; margin-bottom:2px; }

/* tool */
.tool { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05); }
.tool h2 { margin:0 0 4px; font-size:20px; }
.steps { display:grid; grid-template-columns:1fr; gap:16px; margin-top:14px; }
@media (min-width:820px) { .steps { grid-template-columns:1fr 1fr; } }
.box { border:1px solid var(--line); border-radius:10px; padding:14px; }
.box h3 { margin:0 0 8px; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--mut); }
.full { grid-column:1/-1; }
label { display:block; margin:8px 0 3px; font-size:13px; font-weight:500; }
input[type=text], select { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; }
.chk { display:flex; gap:9px; align-items:flex-start; margin:8px 0; font-size:14px; }
.chk input { margin-top:4px; width:16px; height:16px; }
#drop { border:2px dashed #cbd5e1; border-radius:12px; padding:34px 16px; text-align:center; color:var(--mut); cursor:pointer; background:#fafcff; transition:.15s; }
#drop b { color:var(--ink); display:block; font-size:16px; margin-bottom:4px; }
#drop.over, #drop:hover { border-color:var(--acc); background:var(--soft); }
#files { margin-top:10px; font-size:13px; color:var(--mut); }
button { padding:12px 22px; border:0; border-radius:10px; background:var(--acc); color:#fff; font:inherit; font-weight:700; font-size:16px; cursor:pointer; }
button:hover:not(:disabled) { background:var(--acc2); }
button:disabled { opacity:.45; cursor:not-allowed; }
.actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
#status { color:var(--mut); font-size:14px; }

/* backend layer — present for the engine, never shown */
#backend { display:none !important; }

/* content */
.content { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; margin-top:16px; }
.content h2 { margin:0 0 10px; font-size:22px; }
.content h3 { margin:18px 0 4px; font-size:16px; }
.content p, .content li { color:#334155; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:12px; }
.grid3 div { background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:14px; }
.grid3 b { display:block; margin-bottom:4px; }
details.faq { border-bottom:1px solid var(--line); padding:10px 0; }
details.faq summary { cursor:pointer; font-weight:600; }
details.faq p { margin:6px 0 0; }
.page { max-width:800px; margin:28px auto; }
.page h1 { font-size:30px; margin:0 0 6px; }
.page h2 { font-size:19px; margin-top:24px; }