/* ====== 引入设计系统（tokens → toolkit） ====== */
@import url('../../ds/v1/toolkit.css');

/* ====== genpass 密码强度专用变量（tokens 未覆盖） ====== */
:root {
  --ds-badge-danger: #b91c1c;
  --ds-badge-warning: #b45309;
  --ds-badge-success: #15803d;
  --ds-danger: #dc2626;
  --ds-warning: #d97706;
  --ds-warning-strong: #eab308;
  --ds-warning-text: #a16207;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ds-badge-danger: #f87171;
    --ds-badge-warning: #fbbf24;
    --ds-badge-success: #4ade80;
  }
}
html[data-theme="dark"] {
  --ds-badge-danger: #f87171;
  --ds-badge-warning: #fbbf24;
  --ds-badge-success: #4ade80;
}

/* ====== genpass 专属组件样式 ====== */
.ds-result-password { display: flex; gap: 10px; margin-bottom: 18px; }
.ds-result-password__input { font-size: 18px; letter-spacing: 0.02em; flex: 1; min-width: 0; }
.ds-result-password__copy { flex-shrink: 0; }

.ds-strength { margin-bottom: 10px; }
.ds-strength__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ds-strength__label { font-size: 14px; font-weight: 500; color: var(--ds-text-soft); }
.ds-strength__value { font-size: 15px; font-weight: 700; }
.ds-strength__bar { height: 8px; border-radius: 999px; background: var(--ds-bg-soft); border: 1px solid var(--ds-border); overflow: hidden; }
.ds-strength__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ds-border); transition: width 0.25s, background 0.25s; }
.ds-strength__bar.is-0 i { background: var(--ds-danger); }
.ds-strength__bar.is-1 i { background: var(--ds-warning); }
.ds-strength__bar.is-2 i { background: var(--ds-warning-strong); }
.ds-strength__bar.is-3 i { background: var(--ds-success); }
.ds-strength__bar.is-4 i { background: var(--ds-success); }
.ds-strength__metrics { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13px; color: var(--ds-text-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ds-strength__suggest { margin: 8px 0 0; font-size: 13px; color: var(--ds-warning); min-height: 20px; }

.ds-privacy-note { font-size: 12px; color: var(--ds-text-soft); margin: 12px 0 0; }

.ds-batch { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.ds-batch__count { flex: 0 0 120px; margin-bottom: 0; }

.ds-table { min-width: 420px; }
.ds-table th { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.ds-table .ds-pw-cell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.ds-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ds-badge--0 { background: rgba(220, 38, 38, 0.12); color: var(--ds-badge-danger); }
.ds-badge--1 { background: rgba(217, 119, 6, 0.12); color: var(--ds-badge-warning); }
.ds-badge--2 { background: rgba(234, 179, 8, 0.14); color: var(--ds-warning-text); }
.ds-badge--3, .ds-badge--4 { background: rgba(22, 163, 74, 0.12); color: var(--ds-badge-success); }

.ds-history__actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.ds-history__empty { color: var(--ds-text-soft); font-size: 14px; text-align: center; padding: 20px 0; margin: 0; }
.ds-history-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); margin-bottom: 8px; background: var(--ds-bg);
}
.ds-history-item__pw { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; word-break: break-all; }
.ds-history-item.is-hidden .ds-history-item__pw { font-family: var(--ds-font); letter-spacing: 0.15em; }
.ds-history-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ds-history-item__time { font-size: 12px; color: var(--ds-text-soft); }
.ds-history-item__actions { display: flex; gap: 6px; }

.ds-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ds-seg { display: flex; gap: 0; background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); padding: 4px; margin-bottom: 18px; }
.ds-seg__item {
  flex: 1; padding: 8px 12px; border: none; border-radius: 6px; background: transparent;
  color: var(--ds-text-soft); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.ds-seg__item:hover { color: var(--ds-text); }
.ds-seg__item.is-active { background: var(--ds-accent); color: #fff; }
.ds-seg--sm .ds-seg__item { flex: 0 1 auto; padding: 5px 14px; }

.ds-check-group { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.ds-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ds-check input { accent-color: var(--ds-accent); width: 16px; height: 16px; }

.ds-details { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); margin-bottom: 16px; }
.ds-details__summary { padding: 10px 14px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ds-text-soft); }
.ds-details__summary:hover { color: var(--ds-text); }
.ds-details[open] .ds-details__summary { border-bottom: 1px solid var(--ds-border); color: var(--ds-text); }
.ds-details > .ds-field { margin: 14px; }

.ds-field__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 10px;
  border-radius: 999px; background: var(--ds-accent); color: #fff; font-size: 13px; font-weight: 600;
}
.ds-field__input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); background: var(--ds-bg); color: var(--ds-text);
  font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ds-field__input:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-bg-soft); }
.ds-field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ds-text-soft); }
.ds-field__row { display: flex; align-items: center; justify-content: space-between; }
.ds-field--full { width: 100%; }
.ds-range { width: 100%; accent-color: var(--ds-accent); cursor: pointer; }

@media (max-width: 480px) {
  .ds-check-group { grid-template-columns: 1fr; }
  .ds-actions { width: 100%; }
  .ds-actions .ds-btn { flex: 1 1 0; }
  .ds-result-password { flex-direction: column; }
  .ds-result-password__copy { width: 100%; }
  .ds-batch__count { flex: 1 1 100%; }
  .ds-strength__metrics { flex-direction: column; gap: 4px; }
  .ds-history-item { flex-wrap: wrap; }
  .ds-history-item__pw { flex: 1 1 100%; }
  .ds-history-item__meta { flex: 0 0 auto; }
  .ds-history-item__actions { margin-left: auto; flex-wrap: wrap; }
}