.checker-wrapper { max-width: 800px; margin: 0 auto; position: relative; z-index: 10;}
.checker-wrapper .card { padding: 2.5rem; border: none; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); margin-top: -3rem; }

.input-group { position: relative; margin-bottom: 2rem; }
.password-input {
  width: 100%;
  padding: 1.25rem 3.5rem 1.25rem 1.25rem;
  font-size: 1.5rem;
  font-family: 'Courier New', Courier, monospace;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-color);
  color: var(--text-color);
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.02);
}
.password-input:focus { outline: none; border-color: var(--primary-color); background: var(--bg-card); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }
.password-input::placeholder { color: #9ca3af; font-family: var(--font-sans); font-size: 1.25rem;}

.toggle-visibility {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
}
.toggle-visibility:hover { color: var(--text-color); background: var(--bg-color); }

.strength-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.75rem; }
.strength-label { font-size: 1.5rem; font-weight: 800; transition: color 0.3s ease;}
.strength-score { font-size: 1.25rem; color: var(--text-light); font-weight: 600; font-variant-numeric: tabular-nums;}

.strength-meter { height: 12px; background: var(--border-color); border-radius: 6px; margin-bottom: 2.5rem; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
.strength-meter-fill { height: 100%; width: 0; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease; border-radius: 6px; }

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.analysis-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-size: 0.95rem;
}

.check-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-weight: bold; font-size: 0.85rem;}
.check-icon.pass { background: #d1fae5; color: #059669; }
.check-icon.fail { background: #f3f4f6; color: #9ca3af; }

.suggestions-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: 1.5rem; margin-bottom: 2.5rem; }
.suggestions-box h3 { color: #b45309; margin-bottom: 1rem; font-size: 1.125rem; display: flex; align-items: center; gap: 0.5rem; }
.suggestions-list { padding-left: 1.5rem; color: #92400e; margin: 0; }
.suggestions-list li { margin-bottom: 0.5rem; }

.generator-section { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--border-color); }
.generator-section h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }

.generator-controls { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .generator-controls { grid-template-columns: 1fr 1fr; } }

.slider-group { display: flex; flex-direction: column; gap: 1rem; }
.slider-header { display: flex; justify-content: space-between; font-weight: 600; color: var(--text-color); }
input[type="range"] { width: 100%; accent-color: var(--primary-color); cursor: pointer; }

.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox-group { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.checkbox-group input { width: 1.125rem; height: 1.125rem; accent-color: var(--primary-color); cursor: pointer; }
.checkbox-group label { cursor: pointer; user-select: none; font-weight: 500;}

.generated-password-box { display: flex; background: var(--bg-color); border: 2px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; margin-top: 1.5rem; }
.generated-password-display { flex-grow: 1; padding: 1.25rem; font-family: 'Courier New', Courier, monospace; font-size: 1.25rem; word-break: break-all; color: var(--text-color); }
.generated-actions button { padding: 0 1.5rem; background: var(--bg-card); border: none; border-left: 2px solid var(--border-color); cursor: pointer; transition: background 0.2s; font-weight: 600; color: var(--primary-color); display: flex; align-items: center; gap: 0.5rem;}
.generated-actions button:hover { background: #f3f4f6; }
.generated-actions button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px;}

@media (max-width: 640px) {
  .checker-wrapper .card { padding: 1.5rem; }
  .password-input { font-size: 1.25rem; padding: 1rem 3rem 1rem 1rem; }
  .strength-label { font-size: 1.25rem; }
  .generated-password-box { flex-direction: column; }
  .generated-actions button { width: 100%; border-left: none; border-top: 2px solid var(--border-color); padding: 1rem; justify-content: center; }
}