:root { color-scheme: light dark; --panel:#ffffff; --text:#102033; --muted:#5b6b7f; --line:#dbe4ee; --accent:#2563eb; --accent2:#14b8a6; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:linear-gradient(180deg, #f8fafc, #eef6ff); color:var(--text); }
main { width:min(860px, calc(100% - 28px)); margin:0 auto; padding:28px 0 44px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:28px; padding:24px; box-shadow:0 20px 70px #1e3a8a14; }
.main-tool { margin-top:18px; }
.brand, .brand a { color:#1d4ed8; font-weight:950; margin-bottom:8px; text-decoration:none; }
h1 { font-size:clamp(2.6rem, 8vw, 5.8rem); line-height:.9; letter-spacing:-.075em; margin:0 0 22px; }
h2 { margin:0 0 12px; }
p { color:var(--muted); line-height:1.55; }
label { display:block; font-weight:850; margin:0 0 7px; }
input, select { width:100%; border:1px solid #cbd5e1; background:#fff; color:var(--text); border-radius:14px; padding:13px 14px; font:inherit; }
.drop { display:flex; min-height:260px; flex-direction:column; align-items:center; justify-content:center; border:3px dashed #93c5fd; border-radius:26px; background:#eff6ff; color:#1e40af; cursor:pointer; text-align:center; margin-bottom:18px; }
.drop input { display:none; }
.drop strong { font-size:clamp(1.6rem, 4vw, 2.7rem); letter-spacing:-.04em; }
.drop span { color:#64748b; margin-top:8px; }
.drop.drag { background:#dbeafe; border-color:#2563eb; }
.quick-row { display:grid; grid-template-columns: 220px 1fr; gap:14px; align-items:end; }
.input-unit { display:flex; align-items:center; border:1px solid #cbd5e1; background:#fff; border-radius:14px; overflow:hidden; }
.input-unit input { border:0; border-radius:0; }
.input-unit span { padding:0 14px; color:#64748b; font-weight:850; }
button, .link-button { border:0; cursor:pointer; font:inherit; text-decoration:none; text-align:center; }
.primary { display:inline-flex; justify-content:center; align-items:center; width:100%; border-radius:16px; padding:15px 18px; background:linear-gradient(135deg, var(--accent), var(--accent2)); color:white; font-weight:950; }
.secondary { border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; border-radius:14px; padding:12px 14px; font-weight:900; }
.primary:hover, .secondary:hover, .preset-list button:hover { filter:brightness(1.04); transform:translateY(-1px); }
.advanced { margin-top:14px; border-top:1px solid var(--line); padding-top:14px; }
.advanced summary { cursor:pointer; color:#1d4ed8; font-weight:900; }
.advanced .grid2 { margin-top:14px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.microcopy, .note { font-size:.92rem; }
.hidden { display:none; }
.result, .below-fold, .seo-content, .faq { margin-top:20px; }
.result-head { display:grid; grid-template-columns:1fr 220px; gap:18px; align-items:center; }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:18px 0; }
.stats div { border:1px solid var(--line); border-radius:18px; padding:14px; background:#f8fafc; }
.stats strong { display:block; font-size:1.35rem; }
.stats span { color:var(--muted); font-size:.9rem; }
.preview-wrap { background:#0f172a; border-radius:20px; padding:14px; display:flex; justify-content:center; }
.preview-wrap img { max-width:100%; max-height:520px; border-radius:12px; }
.preset-list { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.preset-list button { border:1px solid var(--line); border-radius:16px; padding:13px; background:#f8fafc; color:#172033; font-weight:850; }
.interest { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:start; }
.note { grid-column:1 / -1; color:#0f766e; margin:0; }
.seo-content ol { color:var(--text); line-height:1.8; font-weight:750; padding-left:22px; }
.internal-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.internal-links a { border:1px solid var(--line); border-radius:999px; padding:9px 12px; color:#1d4ed8; background:#f8fafc; font-weight:850; text-decoration:none; }
.faq details { border-top:1px solid var(--line); padding:13px 0; }
.faq summary { cursor:pointer; font-weight:900; }
.faq p { margin-bottom:0; }
@media (prefers-color-scheme: dark) { :root { --panel:#0b1220; --text:#e5eefb; --muted:#9fb0c8; --line:#243247; } body { background:linear-gradient(180deg, #020617, #0f172a); } input, select, .input-unit, .stats div, .preset-list button, .internal-links a { background:#111827; color:var(--text); } .drop { background:#0b2545; } .advanced summary, .brand, .brand a { color:#93c5fd; } }
@media (max-width:760px) { main { width:min(100% - 20px, 860px); padding-top:10px; } .panel { padding:18px; } .quick-row, .grid2, .result-head, .stats, .preset-list, .interest { grid-template-columns:1fr; } .drop { min-height:220px; } }