/* modules/calc/calc.css */
.calc-wrap{ display:grid; gap:12px; }

.calc-head{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px;
}
.calc-home{ margin-bottom: 8px; font-size: 13px; color: var(--text-muted); }
.calc-home a{ color: var(--text-muted); }
.calc-home a:hover{ color: var(--link-hover); text-decoration: underline; }

.calc-title{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  position: relative;
  padding-left: 12px;
}
.calc-title::before{
  content:"";
  position:absolute;
  left:0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.calc-intro-text{
  margin: 0 0 12px;
  color: var(--text-muted);
}

.calc-inline-link{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}

.calc-inline-link:hover{
  border-bottom-color: color-mix(in srgb, var(--accent) 75%, transparent);
}

.calc-body{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px;
  color: var(--text-main);
  line-height: 1.7;
}

.calc-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  color: var(--text-muted);
}

.calc-list{ display:grid; gap: 12px; margin-top: 8px; }

.calc-indicators{
  margin-top: 14px;
  margin-bottom: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.calc-ind{
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
}

.calc-ind__label{ font-size: 12px; color: var(--text-muted); }

.calc-ind__link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--text-muted) 45%, transparent);
}
.calc-ind__link:hover{
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
.calc-ind__val{ margin-top: 6px; font-size: 18px; font-weight: 700; }
.calc-ind__note{ margin-top: 6px; font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.calc-ind--meta .calc-ind__val{ font-size: 14px; font-weight: 600; }
.calc-item{
  display:block;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow);
  color: var(--text-main);
  text-decoration:none;
  transition: var(--transition);
}
.calc-item:hover{ border-color: var(--accent); transform: translateY(-1px); text-decoration:none; }

.calc-item__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.calc-item__title{ font-weight: 900; }
.calc-item__status{
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}
.calc-item__desc{ margin-top: 8px; color: var(--text-muted); font-size: 14px; line-height: 1.45; }

/* tool */
.calc-form{ display:grid; gap: 12px; }

.calc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.calc-field{ display:grid; gap: 6px; }
.calc-field span{ font-size: 13px; color: var(--text-muted); }

.calc-field input,
.calc-field select{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  transition: var(--transition);
}

.calc-field input:focus,
.calc-field select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(49,130,206,.12);
}

.calc-results{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.calc-res{
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow);
}
.calc-res__label{ font-size: 13px; color: var(--text-muted); }
.calc-res__val{ margin-top: 6px; font-weight: 900; font-size: 18px; }

@media (max-width: 900px){
  .calc-indicators{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-results{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px){
  .calc-indicators{ grid-template-columns: 1fr; }
  .calc-grid{ grid-template-columns: 1fr; }
  .calc-results{ grid-template-columns: 1fr; }
}