:root{
  --primary:#0f766e;
  --primary-dark:#115e59;
  --bg:#f3f4f6;
  --card-bg:#ffffff;
  --text:#111827;
  --radius:14px;
  --shadow:0 6px 20px rgba(0,0,0,0.07);
  --border:#e3e3e3;
  --soft-text:#666;
  --soft-bg:#eef9f3;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
}

/* CONTAINER */
.container{width:95%;max-width:980px;margin:0 auto;}

/* HEADER */
.site-header{
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
  padding:12px 0;
}
.header-inner{display:flex;align-items:center;gap:12px;}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;}
.brand-dot{width:16px;height:16px;background:var(--primary);border-radius:50%;}
.brand-name{font-weight:800;font-size:1.15rem;}

/* SHARE BUTTON */
.header-share{position:relative;margin-left:auto;}
.header-share-btn{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:6px 14px;
  border-radius:20px;
  cursor:pointer;
  font-size:.82rem;
  font-weight:750;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  transition:background .15s,transform .1s;
}
.header-share-btn:hover{background:var(--primary-dark);transform:translateY(-1px);}
.header-share-menu{
  display:none;
  position:absolute;
  right:0;
  top:120%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  padding:.35rem 0;
  min-width:180px;
  z-index:9999;
}
.header-share-menu.open{display:block;}
.header-share-item{
  width:100%;
  border:none;
  background:transparent;
  text-align:left;
  padding:.45rem .9rem;
  font-size:.82rem;
  cursor:pointer;
  color:#111827;
}
.header-share-item:hover{background:#f3f4f6;}
.header-share-toast{
  position:absolute;
  right:0;
  top:-28px;
  background:#111827;
  color:#fff;
  font-size:.75rem;
  padding:3px 10px;
  border-radius:20px;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity .15s,transform .15s;
}
.header-share-toast.show{opacity:1;transform:translateY(-10px);}

/* MAIN */
.page-main{padding:2.2rem 0 3rem;}
.hero-layout{display:flex;flex-direction:column;gap:2rem;}

.calc-column,.text-column{
  width:100%;
  max-width:720px;
  margin:0 auto;
}

/* CARD */
.card{
  background:var(--card-bg);
  border-radius:1.1rem;
  padding:1.4rem 1.5rem 1.3rem;
  border:1px solid #e5e7eb;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}

/* TITLES */
.calc-card h1{
  font-size:1.5rem;
  margin:0 0 .4rem 0;
  font-weight:900;
  text-align:center;
}
.calc-intro{
  font-size:.95rem;
  color:var(--soft-text);
  margin:0 0 1rem 0;
  text-align:center;
}
.calc-hint{
  font-size:.85rem;
  color:var(--soft-text);
  text-align:center;
  font-weight:650;
  margin-top:.7rem;
  margin-bottom:.5rem;
}

/* UNIT SWITCH (m2/m3) */
.unit-switch{
  display:flex;
  gap:.5rem;
  margin:.4rem 0 .9rem;
  justify-content:center;
  flex-wrap:wrap;
}
.unit-btn{
  flex:1 1 0;
  max-width:160px;
  border-radius:999px;
  border:1px solid #d1d5db;
  padding:.75rem 1.1rem;
  font-size:.95rem;
  background:#f9fafb;
  color:#111827;
  cursor:pointer;
  font-weight:800;
}
.unit-btn.active{
  background:var(--primary);
  border-color:var(--primary-dark);
  color:#fff;
}

/* SVG */
.svg-wrapper{
  width:100%;
  max-width:700px;
  margin:0 auto .2rem;
}
.svg-wrapper svg{width:100%;height:auto;display:block;}

/* FIELDS */
.field-row{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-bottom:.8rem;
}
.field-row label{
  font-size:.95rem;
  color:#111827;
  font-weight:850;
}
.field-row input,
.field-row select{
  border-radius:.65rem;
  border:1px solid #d1d5db;
  padding:.85rem 1rem;
  font-size:1.1rem;
  font-family:inherit;
  font-weight:650;
  background:#fff;
}
.field-row input::placeholder{font-weight:600;color:#9ca3af;}
.field-row input:focus,
.field-row select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(15,118,110,.16);
}

/* RESULT */
.result-box{
  margin-top:.9rem;
  padding:.9rem 1.1rem;
  border-radius:.9rem;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
}
.result-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:1rem;
  font-weight:800;
}
.result-label{font-weight:900;color:#047857;}

/* TEXT COLUMN */
.text-column{
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:1.4rem 1.5rem;
  border:1px solid #e5e7eb;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.text-column h2{
  font-size:1.25rem;
  margin:0 0 .5rem 0;
  font-weight:900;
}
.text-column p{
  font-size:.95rem;
  color:#374151;
  margin:0 0 .7rem 0;
  font-weight:520;
}

/* RELATED TOOL */
.related-tool{
  max-width:720px;
  margin:1.1rem auto 0;
  padding:1rem 1.1rem;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(15,23,42,0.06);
}
.related-tool p{margin:0;color:#374151;font-weight:520;}
.related-tool a{color:var(--primary);text-decoration:none;font-weight:800;}
.related-tool a:hover{text-decoration:underline;}

/* FOOTER */
.site-footer{
  padding:15px 0;
  border-top:1px solid var(--border);
  background:var(--card-bg);
  margin-top:40px;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
  font-size:.9rem;
  color:var(--soft-text);
}
.footer-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
  font-size:.85rem;
}
.footer-links a{color:var(--primary);text-decoration:none;font-weight:700;}
.footer-links a:hover{text-decoration:underline;}
.footer-sep{color:#9ca3af;}
.footer-copy{font-size:.85rem;color:var(--soft-text);}

/* RESPONSIVE */
@media(max-width:768px){
  .page-main{padding-top:1.6rem;}
  .card{padding:1.2rem 1.1rem 1.1rem;}
  .text-column{padding:1.2rem 1.1rem;}
}
@media(min-width:1024px){
  .calc-card h1{font-size:2rem;}
  .calc-intro{font-size:1rem;}
  .field-row input,.field-row select{padding:.95rem 1.2rem;font-size:1.18rem;}
  .text-column h2{font-size:1.5rem;}
  .text-column p{font-size:1rem;}
}
/* FAQ */
.faq{
  margin-top:1.6rem;
  margin-bottom:2rem;
}
.faq .container{
  max-width:980px;
}
.faq h2{
  max-width:720px;
  margin:0 auto 1rem auto;
  padding:0 6px;
}
.faq-item{
  max-width:720px;
  margin:0 auto .75rem auto;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:.9rem 1rem;
  box-shadow:0 10px 25px rgba(15,23,42,0.06);
}
.faq-item > summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::marker{content:"";}
.faq-item > summary::after{
  content:"›";
  font-size:22px;
  line-height:1;
  opacity:.75;
  transform:rotate(0deg);
  transition:transform .18s ease, opacity .18s ease;
}
.faq-item[open] > summary::after{
  transform:rotate(90deg);
  opacity:1;
}
.faq-item > p{
  margin:.75rem 0 0 0;
  line-height:1.6;
  color:#374151;
  font-weight:520;
}