/* Pool Calc Hub - shared styles */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --blue:#0a6ebd; --blue-dark:#085a9c; --blue-light:#e8f2fb;
  --ink:#16242f; --gray:#5b6b76; --line:#e3eaf0;
  --green:#0a7a3d; --green-light:#e6f7ec; --red:#b42323;
}
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:#f7fafc; line-height:1.6; }
.container { max-width:860px; margin:0 auto; padding:0 16px; }
header.site { background:var(--blue); color:#fff; }
header.site .container { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; flex-wrap:wrap; gap:8px; }
.brand { font-size:19px; font-weight:700; color:#fff; text-decoration:none; }
.brand span { opacity:.85; font-weight:400; }
nav.top a { color:#dcecf9; text-decoration:none; font-size:14px; margin-left:14px; }
nav.top a:hover { color:#fff; }
.hero { background:linear-gradient(180deg,var(--blue) 0%,var(--blue-dark) 100%); color:#fff; padding:36px 0 44px; text-align:center; }
.hero h1 { font-size:26px; margin-bottom:8px; }
.hero p { max-width:560px; margin:0 auto; opacity:.92; font-size:15px; }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:20px 0; }
.tool-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; text-decoration:none; color:var(--ink); display:block; transition:box-shadow .15s; }
.tool-card:hover { box-shadow:0 4px 14px rgba(10,110,189,.12); }
.tool-card h2 { font-size:16px; color:var(--blue-dark); margin-bottom:4px; }
.tool-card p { font-size:13px; color:var(--gray); }
section.content { background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; margin:18px 0; }
section.content h2 { font-size:19px; margin-bottom:10px; color:var(--ink); }
section.content h3 { font-size:15px; margin:16px 0 6px; }
section.content p, section.content li { font-size:14px; color:#33424d; }
section.content ul { padding-left:20px; margin:6px 0; }
.calc-box { background:var(--blue-light); border:1px solid #cfe2f3; border-radius:12px; padding:20px; margin:20px 0; }
.calc-box label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin:10px 0 4px; }
.calc-box input, .calc-box select { width:100%; padding:10px 12px; font-size:15px; border:1px solid #b9d2e8; border-radius:8px; background:#fff; }
.calc-box .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.calc-box button { width:100%; margin-top:16px; padding:12px; font-size:16px; font-weight:700; color:#fff; background:var(--blue); border:none; border-radius:8px; cursor:pointer; }
.calc-box button:hover { background:var(--blue-dark); }
.result { margin-top:14px; padding:14px; background:var(--green-light); border:1px solid #bfe6cd; border-radius:8px; font-size:14px; display:none; }
.result strong { font-size:18px; color:var(--green); }
.result .warn { color:var(--red); font-weight:600; margin-top:6px; }
.faq details { border-bottom:1px solid var(--line); padding:10px 0; }
.faq summary { font-weight:600; font-size:14px; cursor:pointer; }
.faq p { margin-top:8px; }
footer.site { background:#0d2b40; color:#9fb8c9; margin-top:30px; padding:22px 0; font-size:13px; }
footer.site a { color:#cfe2f3; }
.breadcrumb { font-size:12px; color:var(--gray); padding:12px 0 0; }
.breadcrumb a { color:var(--blue); text-decoration:none; }
@media (max-width:520px){ .calc-box .row { grid-template-columns:1fr; } .hero h1{font-size:22px;} }