/* password-generator.css */

.password-generator-container {
  padding: 20px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-width: 640px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
}

.password-options {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f1f1f1;
  margin-bottom: 20px;
}
.password-options label {
  display: block;
  margin: 12px 0;
  font-size: 15px;
}
.password-options input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
.password-options input[type="checkbox"] { margin-right: 8px; transform: scale(1.2); }

.pw-mode { margin-top: 10px; border: 0; padding: 0; }
.pw-mode legend { font-weight: 700; margin-bottom: 6px; }
.pw-mode label { display: inline-block; margin-right: 14px; font-size: 14px; }

.password-generator-container .btn {
  display: inline-block;
  padding: 10px 24px;
  margin: 8px 5px;
  background-color: #007BFF;
  color: #fff;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .3s ease;
}
.password-generator-container .btn:hover { background-color: #0056b3; }

#strength-bar {
  display: flex;
  margin-top: 10px;
  gap: 4px;
  height: 10px;
}
#strength-bar .strength { flex: 1; background: #ccc; border-radius: 2px; }
#strength-bar .strength:nth-child(1) { background: #dc3545; }
#strength-bar .strength:nth-child(2) { background: #fd7e14; }
#strength-bar .strength:nth-child(3) { background: #ffc107; }
#strength-bar .strength:nth-child(4) { background: #28a745; }
#strength-bar .strength:nth-child(5) { background: #007BFF; }

#strength-level { margin-top: 12px; font-weight: 700; font-size: 16px; color: #333; }

.pw-policy-alert,
#policy-alert {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.pw-status {
  margin-top: 8px;
  font-size: 13px;
  color: #444;
}

#pw-status { margin-top: 10px; }
#pw-status .status-text { margin-top: 6px; font-size: 14px; color: #333; }
#pw-status .status-meta  { margin-top: 4px; font-size: 12px; color: #666; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.badge-running { background: #e7f1ff; color: #0b5ed7; border: 1px solid #b6d4fe; }
.badge-ok      { background: #eaf7ea; color: #137333; border: 1px solid #b7e1cd; }
.badge-warn    { background: #fff8e1; color: #8a6d1a; border: 1px solid #ffe8a3; }
.badge-error   { background: #fde7e9; color: #a61b2b; border: 1px solid #f5c2c7; }
.badge-info    { background: #eef2f7; color: #2f3d4a; border: 1px solid #d7dee7; }

.spinner {
  width: 14px; height: 14px; border: 2px solid #b6d4fe; border-top-color: #0b5ed7;
  border-radius: 50%; display: inline-block; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }