:root { --accent:#4f46e5; --accent2:#7c3aed; --bg:#0f172a; --card:#1e293b; --card2:#273549; --text:#e2e8f0; --muted:#94a3b8; --green:#4ade80; }
* { box-sizing:border-box; margin:0; }
body { font-family:system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
a { color:#a5b4fc; text-decoration:none; }
.nav { display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem; background:var(--card); flex-wrap:wrap; }
.nav .brand { font-weight:800; font-size:1.15rem; color:#fff; letter-spacing:.5px; }
.nav .brand span { color:#818cf8; }
.nav a.link { font-size:.9rem; color:var(--muted); }
.nav a.link:hover, .nav a.link.active { color:#fff; }
main { max-width:1000px; margin:0 auto; padding:2rem 1rem; }
h1 { font-size:1.6rem; text-align:center; margin-bottom:.4rem; }
p.sub { text-align:center; color:var(--muted); margin-bottom:.5rem; }
p.priv { text-align:center; color:var(--green); font-size:.8rem; margin-bottom:1.8rem; }
.card { background:var(--card); border-radius:14px; padding:1.5rem; margin-bottom:1.2rem; }
.drop { border:2px dashed #475569; border-radius:10px; padding:2.2rem 1rem; text-align:center; color:var(--muted); cursor:pointer; transition:.2s; }
.drop.over { border-color:var(--accent); color:var(--text); }
.drop input { display:none; }
label.lbl { display:block; margin:1rem 0 .3rem; font-size:.85rem; color:var(--muted); }
select, input[type=number], input[type=text] { width:100%; padding:.55rem; border-radius:8px; border:1px solid #475569; background:var(--bg); color:var(--text); font-size:.95rem; }
.row { display:flex; gap:1rem; flex-wrap:wrap; }
.row > div { flex:1; min-width:140px; }
button.btn { margin-top:1.2rem; width:100%; padding:.75rem; border:none; border-radius:8px; background:var(--accent); color:#fff; font-size:1rem; cursor:pointer; font-weight:600; }
button.btn:hover { background:var(--accent2); }
button.btn:disabled { opacity:.5; cursor:not-allowed; }
.status { margin-top:.8rem; font-size:.85rem; color:var(--muted); min-height:1.2em; }
.files { margin-top:.6rem; font-size:.8rem; color:var(--muted); word-break:break-all; }
.chk { display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.9rem; color:var(--muted); }
.chk input { width:auto; }
.grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.tool-card { background:var(--card); border-radius:14px; padding:1.4rem; display:block; color:var(--text); border:1px solid transparent; transition:.15s; }
.tool-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.tool-card .emoji { font-size:1.8rem; }
.tool-card h3 { margin:.5rem 0 .3rem; font-size:1.05rem; }
.tool-card p { font-size:.85rem; color:var(--muted); line-height:1.45; }
.result-box { background:var(--card2); border-radius:10px; padding:1rem; margin-top:1rem; font-size:.95rem; line-height:1.7; display:none; }
.result-box b { color:var(--green); }
.result-box .bad { color:#f87171; }
footer { text-align:center; color:#64748b; font-size:.8rem; padding:2rem 1rem; }
canvas.preview { max-width:100%; border:1px solid #475569; border-radius:8px; margin-top:1rem; touch-action:none; }
.thumb-list { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.thumb-list .th { background:var(--card2); border-radius:8px; padding:.5rem .7rem; font-size:.8rem; display:flex; align-items:center; gap:.5rem; }
.thumb-list .th button { background:none; border:none; color:#f87171; cursor:pointer; font-size:1rem; }
.thumb-list .th .mv { color:#a5b4fc; }

/* --- SEO content layout additions --- */
.grid2 { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
main h2 { font-size:1.15rem; margin-bottom:.6rem; }
main h3 { font-size:.98rem; margin:1rem 0 .3rem; color:#c7d2fe; }
.card p { color:var(--muted); font-size:.9rem; line-height:1.65; margin-bottom:.6rem; }
.card p strong { color:var(--text); }
ol.steps { color:var(--muted); font-size:.9rem; line-height:1.7; padding-left:1.2rem; }
ol.steps li { margin-bottom:.4rem; }
ol.steps strong { color:var(--text); }
.tool-card h2 { font-size:1.05rem; margin:.5rem 0 .3rem; }
footer { text-align:center; color:#64748b; font-size:.8rem; padding:2.5rem 1rem; max-width:900px; margin:0 auto; line-height:1.7; }
footer p { margin-bottom:.5rem; }