/* breach-checker.css (tool-specific styles) */
/* Simple spacing helpers (avoid inline styles) */
    .mt-12{ margin-top: 12px; }
    .mt-18{ margin-top: 18px; }

    /* Label styling to match the tool theme */
    .field-label{
      display:block;
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-secondary);
      margin: 8px 0 6px;
    }

    /* Input matches other tools while keeping original class hooks */
    .password-input{
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      border: 1px solid var(--border-color, rgba(0,212,255,0.2));
      background: rgba(255,255,255,0.03);
      color: var(--text-primary);
      outline: none;
      font-size: 0.98rem;
    }
    .password-input::placeholder{ color: rgba(184,197,214,0.55); }
    .password-input:focus{
      border-color: var(--primary-cyan);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    /* Strength meter */
    .strength-meter{
      height: 10px;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid var(--border-color, rgba(0,212,255,0.2));
      background: rgba(255,255,255,0.04);
      margin-top: 10px;
    }
    .strength-fill{
      height: 100%;
      width: 0%;
      background: rgba(107,114,128,0.9);
      transition: width .25s ease, background-color .25s ease;
    }
    .strength-text{
      margin-top: 8px;
      color: var(--text-secondary);
      font-size: 0.95rem;
    }

    /* Hash preview pill */
    .hash-visual{
      margin-top: 14px;
      border-radius: 14px;
      border: 1px solid rgba(0, 212, 255, 0.18);
      background: rgba(0, 212, 255, 0.06);
      padding: 12px 14px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      font-family: var(--mono);
      color: var(--text-primary);
    }
    .hash-prefix{ color: var(--primary-cyan); font-weight: 800; }
    .hash-suffix{ color: var(--text-secondary); }

    /* Result box states (JS toggles .safe / .breached) */
    .result-box{
      margin-top: 18px;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(0, 212, 255, 0.18);
      background: rgba(5, 8, 16, 0.55);
      display: none;
    }
    .result-box h3{ margin: 0 0 6px 0; }
    .result-box p{ margin: 0 0 6px 0; }
    #breachDetails{ color: var(--text-secondary); font-size: 0.95rem; }

    .result-box.safe{
      display: block;
      border-color: rgba(16,185,129,0.45);
      background: rgba(16,185,129,0.10);
    }
    .result-box.breached{
      display: block;
      border-color: rgba(239,68,68,0.45);
      background: rgba(239,68,68,0.10);
    }

    /* Spinner (used by JS) */
    .loading{
      display: inline-block;
      width: 18px;
      height: 18px;
      border: 3px solid rgba(184,197,214,0.28);
      border-top: 3px solid var(--primary-cyan);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      vertical-align: -3px;
      margin-right: 6px;
    }
    @keyframes spin{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} }

    /* Tighten list spacing inside notice blocks */
    .notice ul{ margin: 8px 0 0 22px; }
    .notice li{ margin: 6px 0; }

    @media (max-width: 640px){
      .brand-logo{ width: 54px; height: 54px; }
    }

/* Initial hidden state (JS can toggle as needed) */
#hashVisual{ display: none; }