:root { --bg:#f7f7f5; --panel:#fff; --line:#e4e4df; --text:#1b1b1f; --muted:#6b6b72; --acc:#2f6fed; --acc-dark:#2158c7; --ok:#1f9d55; --bad:#d23f3f; --warn:#b7791f; }
* { box-sizing:border-box }
html,body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif }
a { color:var(--acc) }
main,footer,header.top { max-width:1040px; margin:0 auto; padding:0 20px }
header.top { display:flex; justify-content:space-between; align-items:center; height:64px }
.logo { font-weight:800; font-size:20px; text-decoration:none; color:var(--text) } .logo span { color:var(--acc) }
.top-right { display:flex; gap:8px; align-items:center }
.pill { border:1px solid var(--line); background:var(--panel); border-radius:99px; padding:6px 12px; font:inherit; font-weight:600; cursor:pointer }
.btn { font:inherit; font-weight:600; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:10px; padding:10px 16px; cursor:pointer }
.btn:hover { border-color:#c9c9c2 } .btn.primary { background:var(--acc); border-color:var(--acc); color:#fff } .btn.primary:hover { background:var(--acc-dark) }
.btn.ghost { background:transparent } .btn.sm { padding:6px 12px; font-size:14px } .btn.wide { width:100%; padding:13px } .btn[disabled] { opacity:.55; cursor:default }
.hero { padding:44px 0 22px } .hero h1 { font-size:clamp(28px,4.4vw,42px); line-height:1.15; margin:0 0 12px } .hero h1 em { font-style:normal; color:var(--acc) }
.hero p { font-size:18px; color:var(--muted); max-width:640px; margin:0 0 16px }
.hero-badges span { display:inline-block; background:#e9f0ff; color:var(--acc-dark); border-radius:99px; padding:4px 12px; font-size:14px; font-weight:600; margin:0 6px 6px 0 }
.cat { margin:26px 0 10px; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; cursor:pointer; text-align:left; font:inherit; color:inherit; transition:box-shadow .15s, transform .15s; position:relative }
.card:hover { box-shadow:0 6px 20px rgba(0,0,0,.07); transform:translateY(-1px) }
.card .icon { font-size:22px; line-height:1; margin-bottom:8px } .card b { display:block; margin-bottom:4px } .card p { margin:0; color:var(--muted); font-size:14px; min-height:42px }
.card .price { margin-top:10px; font-size:13px; font-weight:700; color:var(--ok) } .card.off { opacity:.55 } .card.off .price { color:var(--warn) }
.faq { padding:40px 0 20px } .faq h2 { font-size:22px } .faq-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px } .faq-grid p { margin:4px 0 0; color:var(--muted); font-size:15px }
footer { padding:36px 0 50px; border-top:1px solid var(--line); margin-top:40px; color:var(--muted) }
.muted { color:var(--muted) } .small { font-size:14px } .err { color:var(--bad) }
.back { display:inline-block; margin:16px 0 6px; text-decoration:none; font-weight:600 }
#tool h1 { margin:6px 0 4px }
.tool-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-top:18px } @media (max-width:760px) { .tool-layout { grid-template-columns:1fr } }
.drop { border:2px dashed #c9c9c2; border-radius:14px; padding:44px 20px; text-align:center; background:var(--panel); cursor:pointer } .drop.over { border-color:var(--acc); background:#eef3ff } .drop u { color:var(--acc) }
.files { list-style:none; padding:0; margin:12px 0 0 } .files li { display:flex; justify-content:space-between; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:6px; font-size:14px }
.files li button { border:0; background:none; color:var(--muted); cursor:pointer; font-size:18px }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px }
.panel label { display:block; font-size:14px; font-weight:600; margin-bottom:12px } .panel input,.panel select,.panel textarea,.modal input { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff }
.panel textarea { min-height:90px; resize:vertical } .panel .help { font-weight:400; color:var(--muted); font-size:13px }
.price-line { margin:6px 0 12px; font-size:14px; color:var(--muted) } .price-line b { color:var(--ok) }
.result { margin-top:22px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px }
.progress { height:8px; background:#ececea; border-radius:99px; overflow:hidden } .progress div { height:100%; width:0; background:var(--acc); transition:width .3s }
.out { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin:8px 0; background:#fafaf8 }
.out a.dl { font-weight:700; text-decoration:none; background:var(--acc); color:#fff; padding:7px 12px; border-radius:8px; white-space:nowrap }
#preview { background:#fafaf8; border:1px solid var(--line); border-radius:10px; padding:14px; white-space:pre-wrap; max-height:420px; overflow:auto; font-size:14px }
.modal { position:fixed; inset:0; background:rgba(20,20,25,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10 } .modal[hidden] { display:none }
.modal-box { background:var(--panel); border-radius:16px; padding:24px; width:min(560px,100%); max-height:92vh; overflow:auto; position:relative } .modal-box h2 { margin:0 0 6px } .modal-box h3 { margin:18px 0 8px; font-size:16px }
.close { position:absolute; top:10px; right:12px; border:0; background:none; font-size:26px; cursor:pointer; color:var(--muted) }
.packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:14px 0 }
.pack { border:1px solid var(--line); border-radius:12px; padding:14px 8px; text-align:center; cursor:pointer; background:#fff; font:inherit } .pack:hover { border-color:var(--acc) } .pack b { display:block; font-size:22px } .pack .bonus { color:var(--ok); font-size:12px; font-weight:700 }
.code-row { display:flex; gap:8px; align-items:center; background:#fafaf8; border:1px solid var(--line); border-radius:10px; padding:8px 10px } .code-row code { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px }
.row { display:flex; gap:8px; margin-bottom:8px } .row input { margin:0 }
.modal table { width:100%; border-collapse:collapse; font-size:13px } .modal th,.modal td { text-align:left; padding:5px 4px; border-bottom:1px solid var(--line) } .modal th { color:var(--muted) }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#1b1b1f; color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; z-index:20 }

.topnav a { color:var(--muted); text-decoration:none; font-weight:600; margin-right:14px } .topnav a:hover { color:var(--text) }
a.card { text-decoration:none; color:inherit; display:block }