/* AI Tools — professional design system.
   Restrained, editorial, precise: near-black ink, one deep-teal accent,
   hairline rules, generous whitespace. No purple gradients, no AI clichés. */
:root{
  --ink:#11181f; --ink-soft:#2a3642; --muted:#5c6b7a; --faint:#8a99a8;
  --line:#e3e8ee; --line-strong:#c9d2dc;
  --bg:#fafbfc; --card:#fff;
  --accent:#0f4c5c; --accent-strong:#0a3540; --accent-soft:#e7f0f2;
  --good:#1a7a4a; --good-soft:#e8f5ee; --bad:#b3261e;
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(17,24,31,.05),0 2px 8px rgba(17,24,31,.04);
  --shadow-md:0 2px 6px rgba(17,24,31,.06),0 10px 24px rgba(17,24,31,.07);
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-serif:"Songti SC","Noto Serif CJK SC",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-strong)}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---- header ---- */
header.site{background:var(--card);border-bottom:1px solid var(--line);border-top:3px solid var(--accent)}
header.site .wrap{display:flex;align-items:center;gap:24px;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.logo{font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.logo::before{content:"";width:11px;height:11px;background:var(--accent);border-radius:3px;flex:none}
.logo span{color:var(--accent)}
nav.main{display:flex;gap:4px}
nav.main a{margin-left:0;color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:550;padding:7px 11px;border-radius:8px}
nav.main a:hover{color:var(--ink);background:#f1f4f7}
nav.main a.active{color:var(--accent);font-weight:700}
@media (max-width:640px){
  header.site .wrap{flex-wrap:wrap;gap:10px}
  nav.main a{padding:6px 8px;font-size:.86rem}
}

.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
main{padding:44px 0 64px}
h1{font-size:clamp(2rem,4.2vw,2.9rem);line-height:1.18;letter-spacing:-.025em;font-weight:800;margin:.15em 0 .4em;max-width:20em}
h2{font-size:1.45rem;line-height:1.3;letter-spacing:-.015em;font-weight:750}
h3{font-size:1.1rem;letter-spacing:-.01em}
.lede{color:var(--ink-soft);font-size:1.16rem;line-height:1.7;max-width:44em;margin:0 0 8px}
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}

/* ---- cards & grids ---- */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin:26px 0}
@media (max-width:820px){.calc-grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.card h2{margin-top:0;font-size:1.2rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 8px}
@media (max-width:820px){.grid3{grid-template-columns:1fr}}
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;transition:border-color .2s,box-shadow .2s,transform .2s}
.tool-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.tool-card b{display:block;margin-bottom:6px;font-size:1.02rem;letter-spacing:-.01em}
.tool-card b a{color:var(--ink);text-decoration:none;display:inline-block}
.tool-card b a:hover{color:var(--accent)}
.tool-card b a::after{content:"\00a0→";color:var(--accent);font-weight:700}
.tool-card span{color:var(--muted);font-size:.92rem;line-height:1.6}

/* ---- forms ---- */
fieldset{border:none;padding:0;margin:0 0 16px}
legend{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:10px;padding:0}
.field{margin-bottom:12px}
.field label{display:block;font-size:.92rem;font-weight:550;margin-bottom:5px}
.field .hint{font-size:.82rem;color:var(--muted);margin-top:4px}
.field input,.field select{width:100%;padding:11px 12px;border:1px solid var(--line-strong);border-radius:9px;font-size:1rem;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input::placeholder{color:var(--faint)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:9px;align-items:center;font-size:.95rem}
.check input{width:auto;accent-color:var(--accent)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px 18px;font-size:.95rem;font-weight:650;cursor:pointer;text-decoration:none;transition:background .2s}
.btn:hover{background:var(--accent-strong);color:#fff}
.btn.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}

/* ---- numbers & tables ---- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.stat{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fcfdfd}
.stat .k{font-size:.78rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.25}
.pos{color:var(--good)} .neg{color:var(--bad)}
table.lines{width:100%;border-collapse:collapse;font-size:.95rem}
table.lines td{padding:7px 2px;border-bottom:1px dashed var(--line)}
table.lines td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.lines tr.total td{border-bottom:none;border-top:2px solid var(--ink);font-weight:700}
table.compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
table.compare th{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#f4f6f8}
table.compare th,table.compare td{padding:12px 14px;text-align:right;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
table.compare th:first-child,table.compare td:first-child{text-align:left}
table.compare tr.best td{background:var(--good-soft);font-weight:700}
table.compare tr:last-child td{border-bottom:none}

/* ---- prose & guides ---- */
.prose{max-width:46em}
.prose h2{margin-top:2em;padding-top:1.2em;border-top:1px solid var(--line)}
.prose h2:first-child{border-top:none;padding-top:0}
.prose p{color:var(--ink-soft)}
.prose table{border-collapse:collapse;width:100%;font-size:.93rem}
.prose table th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#f4f6f8}
.prose table th,.prose table td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.prose table tr:nth-child(even) td{background:#fcfdfd}
.note{font-size:.86rem;color:var(--muted);border-left:3px solid var(--line-strong);padding:2px 0 2px 12px;margin:18px 0}
details.detail{margin-top:8px}
details.detail summary{cursor:pointer;color:var(--accent);font-size:.9rem;font-weight:600}

/* ---- footer & toast ---- */
footer.site{border-top:1px solid var(--line);background:var(--card);color:var(--muted);font-size:.88rem}
footer.site .wrap{padding-top:22px;padding-bottom:30px}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 18px;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .25s;box-shadow:var(--shadow-md)}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}