/* Deepnet Password Generator styles */
.dpg-wrapper {
  --dpg-gap: 10px;
  --dpg-radius: 10px;
  --dpg-border: 1px solid #e5e7eb;
  --dpg-bg: #ffffff;
  --dpg-muted: #6b7280;
  --dpg-accent: #2563eb;
  --dpg-shadow: 0 2px 10px rgba(0,0,0,0.05);
  background: var(--dpg-bg);
  border: var(--dpg-border);
  border-radius: var(--dpg-radius);
  padding: 16px;
  box-shadow: var(--dpg-shadow);
  max-width: 680px;
}

.dpg-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: var(--dpg-gap); margin-bottom: 12px; }
.dpg-label { color: #111827; font-weight: 600; }

/* Fix for password box + eye/copy icons alignment */
.dpg-output-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dpg-output {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  letter-spacing: 0.3px;
}
.dpg-output-group .dpg-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
}

.dpg-btn {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  border-radius: 8px;
  cursor: pointer;
}
.dpg-btn:hover { background: #f3f4f6; }
.dpg-btn:active { transform: translateY(1px); }

.dpg-length-group { display: grid; grid-template-columns: 1fr 84px; gap: 10px; align-items: center; }
.dpg-length, .dpg-length-num, .dpg-checkboxes input {
  accent-color: var(--dpg-accent);
}

.dpg-length-num {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.dpg-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.dpg-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.dpg-strength { color: var(--dpg-muted); }

/* Highlight Generate button */
.dpg-generate {
  background-color: #2563eb;
  color: #ffffff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dpg-generate:hover { background-color: #1d4ed8; }
.dpg-generate:active {
  background-color: #1e40af;
  transform: translateY(1px);
}

.dpg-details { margin-top: 8px; }
.dpg-details summary { cursor: pointer; font-weight: 600; color: #111827; }
.dpg-details ul { margin: 8px 0 0 18px; color: #374151; }

/* Responsive */
@media (max-width: 640px) {
  .dpg-row { grid-template-columns: 1fr; }
  .dpg-label { margin-bottom: -4px; }
}