:root { --bg:#121212; --card:#1e1e1e; --field:#2c2c2e; --text:#fff; --muted:#aaa; --accent:#0a84ff; --border:#333; --ok:#30d158; --err:#ff453a; --warn:#ffcc00; }
[hidden] { display:none !important; }
#presets button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:16px 16px 90px; line-height:1.5; }
a { color:var(--accent); }
.skip { position:absolute; left:-999px; }
.skip:focus { left:8px; top:8px; background:#000; padding:6px 10px; z-index:200; }
nav.site { width:100%; max-width:760px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-bottom:18px; font-size:13px; }
nav.site a { color:var(--muted); text-decoration:none; }
nav.site a:hover, nav.site a[aria-current="page"] { color:var(--accent); }
h1 { font-size:26px; font-weight:700; text-align:center; margin-bottom:4px; }
.subtitle { color:var(--muted); font-size:14px; text-align:center; margin-bottom:8px; }
.how-to { color:#999; font-size:13px; text-align:center; margin:0 auto 16px; max-width:440px; }
main.tool { width:100%; display:flex; flex-direction:column; align-items:center; }
.card { background:var(--card); border-radius:16px; padding:20px; width:100%; max-width:440px; border:1px solid var(--border); }
label { display:block; margin:12px 0 4px; font-size:14px; }
textarea, input[type="text"], input[type="number"], select { width:100%; padding:12px; background:var(--field); color:#fff; border:1px solid #444; border-radius:10px; font-size:15px; font-family:inherit; }
textarea.mono, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
textarea { min-height:110px; resize:vertical; margin:4px 0 8px; }
input[type="range"] { width:100%; accent-color:var(--accent); }
.value { color:var(--accent); font-weight:600; }
.row { display:flex; align-items:center; gap:10px; margin:8px 0; font-size:14px; }
.row input[type="checkbox"] { width:18px; height:18px; accent-color:var(--accent); }
.row label { margin:0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
button { font-family:inherit; }
button.main { width:100%; padding:14px; background:var(--accent); color:#fff; border:none; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer; margin-top:10px; }
button.secondary { width:100%; padding:12px; background:var(--field); color:#fff; border:1px solid #444; border-radius:12px; font-size:15px; cursor:pointer; margin-top:8px; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible, a:focus-visible, .dropzone:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.output { background:#2a2a2a; padding:14px; border-radius:10px; margin:12px 0 0; word-break:break-all; min-height:52px; white-space:pre-wrap; }
.status { margin-top:10px; font-size:14px; color:var(--muted); text-align:center; min-height:20px; }
.status.ok { color:var(--ok); } .status.err { color:var(--err); }
.dropzone { border:2px dashed #555; border-radius:12px; padding:34px 12px; text-align:center; color:var(--muted); cursor:pointer; transition:border-color .2s; }
.dropzone:hover, .dropzone.dragover { border-color:var(--accent); }
.warning { background:#3a2a00; color:var(--warn); padding:10px; border-radius:8px; font-size:13px; margin:8px 0; }
.note { color:#888; font-size:12px; margin-top:12px; text-align:center; }
.progress { width:100%; height:6px; background:#333; border-radius:3px; margin-top:10px; overflow:hidden; }
.progress > div { height:100%; background:var(--accent); width:0; transition:width .2s; }
.result-item { background:#2a2a2a; padding:8px 10px; border-radius:8px; margin-top:6px; display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.result-item span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.savings { color:var(--ok); }
footer.site { margin-top:28px; font-size:12px; color:#777; text-align:center; max-width:640px; }
footer.site a { color:var(--muted); }
/* Ad slot – placeholder kept on purpose until an ad network is chosen */
.ad-banner { position:fixed; bottom:0; left:0; right:0; height:60px; background:#1a1a1a; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:center; z-index:100; }
.ad-placeholder { color:#666; font-size:12px; }
/* content pages */
article.page { width:100%; max-width:680px; }
article.page h1 { text-align:left; margin-bottom:12px; }
article.page h2 { font-size:18px; margin:26px 0 8px; }
article.page p, article.page li { color:#ddd; }
article.page ul, article.page ol { padding-left:22px; margin:6px 0; }
article.page li { margin:4px 0; }
.highlight { background:#1e3a2f; padding:12px 14px; border-radius:10px; margin:14px 0; }
details { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:8px 0; }
details summary { cursor:pointer; font-weight:600; }
details p { margin-top:8px; }