:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --ink:#0E1D33;--ink-2:#42526B;--ink-3:#8593A6;--bg:#F5F7FA;--card:#FFF;--line:#E1E6ED;--line-2:#EEF1F5;--save:#0F7A5A;--save-bg:#E6F4EF;--cost:#B4562A;--cost-bg:#F8ECE3;--accent:#2F5FD0;--accent-bg:#EAF0FC;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);line-height:1.55;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom);}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.wrap{max-width:640px;margin:0 auto;padding:0 16px;}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
h1,h2,h3,h4{font-family:var(--font-sans);}

.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top);}
.top .row{max-width:640px;margin:0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);}
.brand .mark{width:24px;height:24px;border-radius:6px;background:var(--ink);display:flex;align-items:center;justify-content:center;}
.brand .mark svg{width:15px;height:15px;}
.back{font-size:14px;color:var(--ink-2);text-decoration:none;padding:6px 8px;border-radius:8px;}
.back:hover{background:var(--line-2);}

main{padding:18px 0 40px;}
.hero-h{font-weight:600;font-size:26px;letter-spacing:-.02em;margin:8px 0 4px;}
.hero-p{font-size:15px;color:var(--ink-2);margin:0 0 20px;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:420px){.grid{grid-template-columns:1fr;}}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;text-decoration:none;color:inherit;transition:transform .12s,border-color .12s;}
.tile:hover{border-color:var(--ink-3);transform:translateY(-1px);}
.tile .ic{width:38px;height:38px;border-radius:10px;background:var(--save-bg);color:var(--save);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.tile .ic svg{width:20px;height:20px;}
.tile h3{font-size:15px;font-weight:600;margin:0 0 4px;}
.tile p{font-size:12px;color:var(--ink-3);margin:0;line-height:1.4;}
.install{margin-top:18px;background:var(--accent-bg);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink-2);}
.install b{color:var(--ink);}

.tool-h{font-weight:600;font-size:22px;letter-spacing:-.01em;margin:2px 0 2px;}
.tool-sub{font-size:14px;color:var(--ink-2);margin:0 0 18px;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 14px;}
.panel h4{font-size:14px;font-weight:600;margin:0 0 12px;}
.field{margin-bottom:16px;}.field:last-child{margin-bottom:0;}
.fh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px;}
.fh label{font-size:13px;font-weight:500;color:var(--ink-2);}
.vbox{display:flex;align-items:center;gap:3px;background:var(--line-2);border-radius:8px;padding:3px 8px;}
.vnum{width:84px;border:0;background:transparent;text-align:right;font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--ink);-moz-appearance:textfield;}
.vnum::-webkit-outer-spin-button,.vnum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.vunit{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--line);border-radius:99px;outline:none;margin:2px 0 0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--save);border:3px solid #fff;box-shadow:0 1px 4px rgba(14,29,51,.28);cursor:pointer;}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--save);border:3px solid #fff;box-shadow:0 1px 4px rgba(14,29,51,.28);cursor:pointer;}
input.acc[type=range]::-webkit-slider-thumb{background:var(--accent);}
input.acc[type=range]::-moz-range-thumb{background:var(--accent);}
.subx{font-size:12px;color:var(--ink-3);margin:7px 0 0;}
.seg{display:flex;background:var(--line-2);border-radius:10px;padding:3px;gap:3px;}
.seg button{flex:1;height:34px;border:0;background:transparent;border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,29,51,.1);}
.quick{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;}
.quick button{font-family:var(--font-mono);font-size:12px;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink-2);cursor:pointer;}
.warn{display:none;margin-top:6px;padding:10px 12px;background:var(--cost-bg);border-radius:8px;font-size:13px;color:var(--cost);}
.warn.show{display:block;}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;}
.kpi .lbl{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);margin:0 0 8px;}
.kpi .big{font-family:var(--font-mono);font-size:22px;font-weight:600;line-height:1;margin:0;}
.kpi .foot{font-size:12px;color:var(--ink-3);margin:6px 0 0;}
.kpi.g .big{color:var(--save);}.kpi.g .foot{color:var(--save);}
.kpi.r .big{color:var(--cost);}.kpi.r .foot{color:var(--cost);}

.verdict{border-radius:10px;padding:13px 15px;font-size:14px;margin:0 0 14px;}
.verdict.good{background:var(--save-bg);color:#0b5c44;}
.verdict.bad{background:var(--cost-bg);color:#8a4020;}
.verdict.info{background:var(--accent-bg);color:var(--ink);}
.verdict b{font-weight:600;}

.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin-bottom:8px;flex-wrap:wrap;}
.legend i{width:16px;height:3px;display:inline-block;vertical-align:middle;margin-right:6px;border-radius:2px;}
.chartbox{width:100%;}
.chartbox svg{display:block;width:100%;height:auto;}

.table-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{padding:8px 10px;text-align:right;white-space:nowrap;}
th{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--line);}
th:first-child,td:first-child{text-align:left;}
td{font-family:var(--font-mono);border-bottom:1px solid var(--line-2);color:var(--ink-2);}
tbody tr:last-child td{border-bottom:0;}
td.g{color:var(--save);font-weight:600;}td.b{color:var(--accent);font-weight:600;}
details.dc{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 14px;overflow:hidden;}
details.dc>summary{cursor:pointer;list-style:none;padding:14px 16px;font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
details.dc>summary::-webkit-details-marker{display:none;}
details.dc>summary::after{content:'\25BE';color:var(--ink-3);font-size:12px;}
details[open].dc>summary::after{content:'\25B4';}
details.dc .body{padding:0 16px 14px;}
.note{font-size:12px;color:var(--ink-3);margin:10px 0 0;}

.legal h2{font-size:20px;font-weight:600;margin:6px 0 12px;letter-spacing:-.01em;}
.legal h3{font-size:14px;font-weight:600;margin:20px 0 6px;}
.legal p{font-size:14px;color:var(--ink-2);margin:0 0 10px;}
.legal .mono{font-family:var(--font-mono);font-size:13px;color:var(--ink);}
.ph{background:#FFF6E5;border:1px dashed #E0B44A;border-radius:8px;padding:2px 6px;font-family:var(--font-mono);font-size:12px;color:#8a6510;}

footer{border-top:1px solid var(--line);margin-top:8px;padding:18px 0 40px;font-size:12px;color:var(--ink-3);}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;}
footer nav{display:flex;gap:14px;flex-wrap:wrap;}
footer nav a{color:var(--ink-2);text-decoration:none;}

/* --- SEO content sections --- */
.crumbs{font-size:12px;color:var(--ink-3);margin:0 0 14px;font-family:var(--font-mono);}
.crumbs a{color:var(--ink-3);text-decoration:none;}
.crumbs a:hover{color:var(--ink-2);}
.content{padding:8px 0 0;}
.content h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:28px 0 10px;}
.content p{font-size:15px;color:var(--ink-2);margin:0 0 12px;max-width:68ch;}
details.faq{border-bottom:1px solid var(--line);}
details.faq summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;font-size:15px;color:var(--ink);display:flex;justify-content:space-between;gap:12px;align-items:center;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:'+';font-family:var(--font-mono);color:var(--ink-3);font-size:18px;flex:none;}
details[open].faq summary::after{content:'\2013';}
details.faq p{padding:0 0 14px;margin:0;font-size:14px;max-width:68ch;}
.related{margin:26px 0 8px;}
.related h2{font-size:15px;margin:0 0 10px;}
.rlinks{display:flex;flex-wrap:wrap;gap:8px;}
.rlinks a{display:inline-block;font-size:13px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-2);text-decoration:none;}
.rlinks a:hover{border-color:var(--ink-3);}