:root{--bg:#ffffff;--text:#16213a;--muted:#5b6478;--brand:#1d4ed8;--brand-d:#1e40af;
--card:#f8fafc;--line:#e2e8f0;--green:#16a34a;--radius:14px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);
background:var(--bg);line-height:1.65;font-size:16.5px}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:800;font-size:22px;color:var(--text);letter-spacing:-.5px}
.logo span{color:var(--brand)}
.nav-links{display:flex;gap:22px;font-weight:600;font-size:15px}
.nav-links a{color:var(--text)}
.hero{background:linear-gradient(135deg,#1d4ed8 0%,#3b82f6 60%,#60a5fa 100%);color:#fff;
padding:64px 0 56px;text-align:center}
.hero h1{font-size:clamp(30px,5vw,46px);letter-spacing:-1px;margin-bottom:12px}
.hero p{font-size:18px;opacity:.95;max-width:640px;margin:0 auto 24px}
.searchbar{max-width:520px;margin:0 auto;display:flex;background:#fff;border-radius:999px;
padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.searchbar input{flex:1;border:0;outline:0;padding:10px 18px;font-size:16px;border-radius:999px}
.searchbar button{border:0;background:var(--brand);color:#fff;border-radius:999px;
padding:10px 26px;font-size:16px;font-weight:700;cursor:pointer}
main{padding:40px 0 20px}
h2.sec{font-size:26px;margin:34px 0 6px;letter-spacing:-.5px}
p.lead{color:var(--muted);max-width:720px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:22px 18px;transition:transform .15s,box-shadow .15s;color:var(--text);display:block}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(29,78,216,.12);text-decoration:none}
.card .ic{font-size:34px;margin-bottom:10px}
.card h3{font-size:17.5px;margin-bottom:6px}
.card p{font-size:14px;color:var(--muted);line-height:1.5}
.toolbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:26px;margin:22px 0}
.toolbox label{font-weight:600;display:block;margin:14px 0 6px}
.toolbox input[type=text],.toolbox input[type=number],.toolbox input[type=date],
.toolbox textarea,.toolbox select{width:100%;padding:11px 13px;font-size:16px;border:1px solid var(--line);
border-radius:10px;background:#fff;color:var(--text)}
.toolbox textarea{min-height:130px;resize:vertical;font-family:inherit}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:12px 26px;
font-size:16px;font-weight:700;cursor:pointer;margin-top:14px}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.btn.small{padding:8px 16px;font-size:14px;margin-top:8px}
.result{background:#fff;border:1px dashed var(--brand);border-radius:10px;padding:16px;
margin-top:16px;font-size:17px;word-break:break-all}
.result b{color:var(--brand)}
.checks{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.checks label{font-weight:400;margin:0;display:flex;gap:6px;align-items:center}
input[type=range]{width:100%}
.badge{display:inline-block;background:#dcfce7;color:var(--green);font-weight:700;
padding:4px 12px;border-radius:999px;font-size:13px}
.steps{margin:14px 0 14px 20px}.steps li{margin-bottom:8px}
.faq{margin-top:26px}.faq details{border:1px solid var(--line);border-radius:10px;
padding:14px 16px;margin-bottom:10px;background:#fff}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin-top:8px;color:var(--muted);font-size:15.5px}
.related{margin-top:26px;background:#eef4ff;border-radius:var(--radius);padding:20px}
.related h3{margin-bottom:10px}.related ul{columns:2;list-style:none}
.related li{margin-bottom:6px}
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:14px}
.swatch{height:74px;border-radius:10px;cursor:pointer;position:relative;flex:1;min-width:110px;
display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;color:#fff;
font-weight:700;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
footer.site{border-top:1px solid var(--line);margin-top:50px;padding:30px 0;background:#f8fafc}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:14px;color:var(--muted)}
.foot a{color:var(--muted);margin-right:14px}
.note{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:14px 16px;
margin:18px 0;font-size:15px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.stat .v{font-size:24px;font-weight:800;color:var(--brand)}
.stat .k{font-size:13px;color:var(--muted)}
#timerDisplay{font-size:64px;font-weight:800;text-align:center;letter-spacing:2px;margin:10px 0}
.preset{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.nav-links{gap:12px;font-size:14px}.related ul{columns:1}
#timerDisplay{font-size:48px}}