Layout and UI Structure

This part of the project handles the page layout, the cards, the indicators, and the accordion structure.

<div class="hs-tool-card fade-up">
  <div class="hs-card-label">01 - Password strength analyzer</div>

  <div class="hs-input-wrap">
    <input class="hs-input" type="password" id="pw-input" />
    <button class="hs-vis-btn" id="pw-toggle" type="button">👁</button>
  </div>

  <div class="hs-strength-row">
    <div class="hs-bars">
      <div class="hs-bar" id="sb1"></div>
      <div class="hs-bar" id="sb2"></div>
      <div class="hs-bar" id="sb3"></div>
      <div class="hs-bar" id="sb4"></div>
    </div>
  </div>
</div>

.hs-tool-card {
  padding: 28px;
  margin-bottom: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}

.hs-faq-item {
  border: 1px solid rgba(96,165,250,0.14);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
}