:root{
  --bg:#f0fdfa; --card:#ffffff; --ink:#0f2e2a; --mut:#5b7a75;
  --teal:#0d9488; --teal-d:#0b7c72; --emerald:#10b981; --emerald-d:#0b9e6e;
  --line:#d7ebe6; --ring:#e6f4f0; --warn:#b91c1c;
  --radius:14px; --shadow:0 6px 24px rgba(13,148,136,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
.wrap{max-width:960px;margin:0 auto;padding:0 18px}
.site-header{background:linear-gradient(135deg,#0b3f3a,#0d9488);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 18px}
.brand{font-size:1.5rem;font-weight:800;color:#fff;text-decoration:none;letter-spacing:-.5px}
.brand span{color:#6ee7b7}
.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav a{color:#e6fffa;text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{color:#fff;text-decoration:underline}
.langswitch{font-size:.85rem;color:#bfe9e2}
.langswitch a{color:#e6fffa;text-decoration:none}
.langswitch a:hover{text-decoration:underline}
.langswitch strong{color:#fff}
main.wrap{padding-top:28px;padding-bottom:40px}
h1{font-size:2.1rem;letter-spacing:-.5px;margin-bottom:6px;color:#0b3f3a}
.intro{color:var(--mut);font-size:1.05rem;margin-bottom:20px;max-width:640px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.tab{border:2px solid var(--line);background:#fff;color:var(--teal-d);font-weight:700;font-size:.95rem;padding:10px 18px;border-radius:999px;cursor:pointer;transition:all .15s}
.tab:hover{border-color:var(--teal)}
.tab.active{background:var(--teal);border-color:var(--teal);color:#fff}
.tabpanel{display:none}
.tabpanel.active{display:block;animation:fade .2s}
@keyframes fade{from{opacity:.4}to{opacity:1}}
.calc-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:22px;border:1px solid var(--line)}
.calc-card h2{font-size:1.35rem;margin-bottom:4px;color:#0b3f3a}
.card-sub{color:var(--mut);margin-bottom:14px;font-size:.95rem}
.row{display:grid;grid-template-columns:1fr 110px 96px 40px;gap:8px;margin-bottom:8px}
.row input,.row select,.conv-row input{border:2px solid var(--line);border-radius:10px;padding:10px 12px;font-size:1rem;width:100%;background:#fbfefe;color:var(--ink)}
.row input:focus,.row select:focus,.conv-row input:focus{outline:none;border-color:var(--teal)}
.rm{border:none;background:#fee2e2;color:var(--warn);font-size:1.3rem;border-radius:10px;cursor:pointer;line-height:1}
.rm:hover{background:#fecaca}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{background:linear-gradient(135deg,var(--emerald),var(--teal));color:#fff;border:none;font-weight:700;font-size:1rem;padding:12px 26px;border-radius:12px;cursor:pointer;box-shadow:0 4px 14px rgba(16,185,129,.35)}
.btn:hover{filter:brightness(1.06)}
.btn-ghost{background:#fff;border:2px solid var(--line);color:var(--teal-d);font-weight:700;font-size:1rem;padding:10px 20px;border-radius:12px;cursor:pointer}
.btn-ghost:hover{border-color:var(--teal)}
.conv-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.conv-row input{flex:1;min-width:160px}
.result{margin-top:18px;background:linear-gradient(135deg,#ecfdf5,#f0fdfa);border:2px solid var(--line);border-radius:var(--radius);padding:20px}
.res-top{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ring{width:110px;height:110px;flex:none}
.ring-bg{fill:none;stroke:var(--ring);stroke-width:12}
.ring-fg{fill:none;stroke:url(#g);stroke:var(--emerald);stroke-width:12;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .8s ease}
.lbl{color:var(--mut);font-size:.95rem}
.big{font-size:3rem;font-weight:800;color:#0b3f3a;letter-spacing:-1px;line-height:1.1}
.letter{font-weight:700;color:var(--teal-d);margin-top:4px;font-size:1.05rem}
.result h3{margin:16px 0 8px;font-size:1.05rem;color:#0b3f3a}
.btable,.scale{width:100%;border-collapse:collapse;font-size:.95rem}
.btable th,.btable td,.scale th,.scale td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.btable th,.scale th{background:#ecfdf5;color:#0b3f3a}
.content{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:22px;border:1px solid var(--line)}
.content h2{font-size:1.3rem;margin:18px 0 8px;color:#0b3f3a}
.content h2:first-child{margin-top:0}
.content p{margin-bottom:10px;color:#33433f}
.formula{background:#0b3f3a;color:#6ee7b7;font-weight:700;font-size:1.1rem;padding:14px 18px;border-radius:10px;margin:12px 0;text-align:center}
.faq{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;border:1px solid var(--line)}
.faq h2{font-size:1.3rem;margin-bottom:12px;color:#0b3f3a}
.faq details{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:12px 16px;background:#fbfefe}
.faq summary{font-weight:700;cursor:pointer;color:#0b3f3a}
.faq summary:hover{color:var(--teal-d)}
.faq p{margin-top:8px;color:#33433f}
footer{background:#0b3f3a;color:#bfe9e2;text-align:center;padding:20px 0;margin-top:10px;font-size:.95rem}
footer .langswitch{margin-left:8px}
.post-list{display:grid;gap:16px;margin-top:18px}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.post-card h2{font-size:1.25rem;margin-bottom:6px}
.post-card h2 a{color:#0b3f3a;text-decoration:none}
.post-card h2 a:hover{color:var(--teal-d);text-decoration:underline}
.post-card p{color:var(--mut);margin-bottom:10px}
.readmore{font-weight:700;color:var(--teal-d);text-decoration:none}
.readmore:hover{text-decoration:underline}
.article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin-bottom:22px}
.article h1{font-size:1.9rem;margin-bottom:8px}
.article h2{font-size:1.3rem;margin:22px 0 8px;color:#0b3f3a}
.article p{margin-bottom:10px;color:#33433f}
.article .cta-box{background:linear-gradient(135deg,#ecfdf5,#f0fdfa);border:2px solid var(--line);border-radius:10px;padding:16px 18px;margin:20px 0}
.article .faq{box-shadow:none;border:none;padding:0;margin-top:18px}
.backlink{margin-top:18px}
.backlink a{font-weight:700;color:var(--teal-d);text-decoration:none}
.backlink a:hover{text-decoration:underline}
@media(max-width:640px){
  .article h1{font-size:1.45rem}
}

@media(max-width:640px){
  .row{grid-template-columns:1fr 84px 76px 36px}
  h1{font-size:1.6rem}
  .big{font-size:2.4rem}
  .site-header .wrap{flex-direction:column;gap:8px}
}