/* =========================================================
   TECH BINU — INTERACTIVE TOOLS
   ========================================================= */
.tb-tools-widget .tb-tool-btn{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  background: var(--tb-grey-bg);
  border:none;
  border-radius:12px;
  padding:13px 14px;
  margin-bottom:10px;
  cursor:pointer;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:13.5px;
  color: var(--tb-black);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.tb-tools-widget .tb-tool-btn:last-child{ margin-bottom:0; }
.tb-tools-widget .tb-tool-btn:hover{ background: var(--tb-blue); color:#fff; transform: translateX(4px); }
.tb-tools-widget .tb-tool-icon{
  width:34px; height:34px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex-shrink:0;
  background:#fff;
}
.tb-tool-btn:hover .tb-tool-icon{ background: rgba(255,255,255,0.25); }

/* Modal overlay */
.tb-modal-overlay{
  display:none;
  position:fixed; inset:0;
  background: rgba(18,21,28,0.65);
  z-index: 4000;
  align-items:center;
  justify-content:center;
  padding: 20px;
}
.tb-modal-overlay.active{ display:flex; }
.tb-modal{
  background:#fff;
  border-radius: var(--tb-radius-lg);
  max-width: 620px;
  width:100%;
  max-height: 88vh;
  overflow-y:auto;
  padding: 30px;
  position:relative;
  box-shadow: var(--tb-shadow-hover);
}
.tb-modal-close{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background: var(--tb-grey-bg);
  font-size:18px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tb-modal-close:hover{ background: var(--tb-blue); color:#fff; }
.tb-modal h3{
  font-size:21px;
  margin-bottom:6px;
  padding-right:40px;
}
.tb-modal-sub{ color: var(--tb-text-light); font-size:13.5px; margin-bottom:22px; }

.tb-tool-field{ margin-bottom:16px; }
.tb-tool-field label{
  display:block;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:13px;
  margin-bottom:7px;
  color: var(--tb-black);
}
.tb-tool-field select,
.tb-tool-field input[type="number"],
.tb-tool-field input[type="range"]{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--tb-grey-border);
  border-radius:10px;
  font-size:14px;
  background: var(--tb-grey-bg);
  font-family:'Inter',sans-serif;
}
.tb-tool-field select:focus,
.tb-tool-field input:focus{ outline:none; border-color:var(--tb-blue); background:#fff; }
.tb-tool-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .tb-tool-row{ grid-template-columns:1fr; } }

.tb-tool-range-value{
  display:inline-block;
  font-weight:700;
  color: var(--tb-blue);
  margin-left:6px;
}

.tb-tool-btn-primary{
  width:100%;
  padding:13px;
  background: var(--tb-blue);
  color:#fff;
  border:none;
  border-radius:12px;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:14.5px;
  cursor:pointer;
  margin-top:6px;
}
.tb-tool-btn-primary:hover{ background: var(--tb-blue-dark); }

.tb-tool-result{
  margin-top:22px;
  padding:18px;
  background: var(--tb-grey-bg);
  border-radius:12px;
  display:none;
}
.tb-tool-result.active{ display:block; }
.tb-tool-result h4{ font-size:14px; text-transform:uppercase; letter-spacing:.3px; color:var(--tb-text-light); margin-bottom:10px; }
.tb-result-big{ font-family:'Poppins',sans-serif; font-weight:800; font-size:26px; color: var(--tb-blue); margin-bottom:4px; }
.tb-result-note{ font-size:12.5px; color: var(--tb-text-light); }

.tb-compare-table{ width:100%; border-collapse:collapse; margin-top:18px; font-size:13.5px; }
.tb-compare-table th, .tb-compare-table td{ padding:10px 8px; border-bottom:1px solid var(--tb-grey-border); text-align:left; }
.tb-compare-table th{ font-family:'Poppins',sans-serif; color:var(--tb-text-light); font-size:12px; text-transform:uppercase; }
.tb-compare-table td:first-child, .tb-compare-table th:first-child{ font-weight:700; color:var(--tb-black); }
.tb-compare-winner{ color: var(--tb-cat-software); font-weight:700; }

.tb-quiz-recommend{
  display:flex;
  gap:14px;
  align-items:center;
  background:#fff;
  border:1.5px solid var(--tb-grey-border);
  border-radius:12px;
  padding:16px;
  margin-bottom:10px;
}
.tb-quiz-recommend .tb-quiz-rank{
  width:32px; height:32px;
  border-radius:50%;
  background: var(--tb-blue);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  flex-shrink:0;
}
.tb-quiz-recommend strong{ display:block; font-family:'Poppins',sans-serif; font-size:15px; }
.tb-quiz-recommend span{ font-size:12.5px; color:var(--tb-text-light); }