/* Tool-specific styles only - global/site styles come from ../public/assets/css/site.css */

main.tool-main { direction: ltr; }

.tool-box {
  max-width: 560px;
  margin: 32px auto;
  padding: 28px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
}

.tool-title { text-align: center; margin-bottom: 12px; font-size: 1.25rem; }
.privacy-note { text-align: center; color: var(--muted); margin-bottom: 12px; font-size: .95rem; }

.password-tools { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.password-tools input[type="password"], .password-tools input[type="text"] {
  flex: 1; height:44px; padding: 10px 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.04); background: transparent; color: inherit; box-sizing: border-box;
}
.password-tools input:focus { outline: none; box-shadow: 0 6px 18px rgba(0,0,0,0.18); border-color: rgba(124,58,237,0.14); }
.password-tools button { position: absolute; top: 50%; transform: translateY(-50%); height:34px; width:34px; display:flex;align-items:center;justify-content:center;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer }
.password-tools #toggleVisibility { right: 8px }
.password-tools #copyPassword { left: 8px }

#strengthBarContainer { width:100%; height:12px; background: rgba(255,255,255,0.02); border-radius:10px; overflow:hidden; margin-bottom:10px }
#strengthBar { height:100%; width:0%; background: linear-gradient(90deg, #ff6b6b, #fbc02d); transition: width .28s ease, background .28s ease }
#strengthLabel { text-align:center; font-weight:700; margin-bottom:8px }

#weaknessList, #suggestionsList { margin:0 0 10px 0; padding-left:18px; color: #ffb4b4; min-height:20px }
#suggestionsList { color: #bcd9ff }

.main-btn, #generateBtn { width:100%; padding:10px 12px; border-radius:10px; border:0; font-weight:800; cursor:pointer; background:var(--accent-mid); color:#fff }
.main-btn:hover, #generateBtn:hover { transform: translateY(-2px) }

.strength-weak { background: #e74c3c !important }
.strength-medium { background: #fbc02d !important }
.strength-strong { background: #43a047 !important }

/* small screens */
@media(max-width:520px){ .tool-box{padding:18px} .password-tools input{height:40px} }

/* Ensure brand header matches global site style (gradient clipped text) */
header nav .brand h1,
header .brand h1 {
  background: var(--accent-mid);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  font-size: 1.05rem;
}