/* ── mode picker ── */
.mode-picker { display: flex; gap: .4rem; }
.mode-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .45rem .6rem; border-radius: .5rem; font-size: .85rem; font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  background: transparent; color: var(--fg); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.mode-btn:hover  { border-color: var(--accent); color: var(--accent); }
.mode-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ── panel ── */
.panel {
  display: flex; flex-direction: column; gap: .85rem;
  padding: .9rem; border-radius: .6rem;
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}

.settings-group { display: flex; flex-direction: column; gap: .65rem; }

.setting-row {
  display: flex; align-items: center; gap: .65rem; font-size: .85rem;
}
.setting-row label { min-width: 5.5rem; opacity: .7; flex-shrink: 0; }
.val { font-variant-numeric: tabular-nums; opacity: 1; margin-left: .25rem; }

/* ── toggles ── */
.toggles { display: flex; flex-direction: column; gap: .4rem; }
.toggle-row {
  display: flex; align-items: center; gap: .6rem;
  font-size: .84rem; cursor: pointer; opacity: .75; transition: opacity .12s;
}
.toggle-row:hover { opacity: 1; }

.toggle {
  width: 2rem; height: 1.1rem; border-radius: 2rem; flex-shrink: 0;
  background: color-mix(in srgb, var(--fg) 20%, transparent);
  position: relative; transition: background .2s; cursor: pointer;
}
.toggle.on { background: var(--accent); }
.toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: calc(1.1rem - 4px); height: calc(1.1rem - 4px);
  border-radius: 50%; background: var(--bg);
  transition: transform .2s;
}
.toggle.on .toggle-knob { transform: translateX(0.9rem); }

/* ── chips ── */
.chip-group { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.chip {
  padding: .2rem .55rem; border-radius: 2rem; font-size: .78rem;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: transparent; color: var(--fg); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.chip:hover  { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }

.sep-input {
  width: 4.5rem; padding: .2rem .4rem; border-radius: .35rem; font-size: .8rem;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg);
}
.sep-input:focus { outline: none; border-color: var(--accent); }

/* ── entropy ── */
.entropy { display: flex; flex-direction: column; gap: .35rem; }
.entropy-bar {
  height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden;
}
.entropy-fill { height: 100%; border-radius: 3px; transition: width .3s, background .3s; }
.entropy-label { font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── count row ── */
.count-row {
  display: flex; align-items: center; gap: .65rem; font-size: .85rem;
}
.count-row label { min-width: 5.5rem; opacity: .7; flex-shrink: 0; }

/* ── actions ── */
.actions { display: flex; gap: .5rem; }
/*
.btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: .5rem; border: none;
  cursor: pointer; font-size: .875rem; font-weight: 500; transition: opacity .15s;
}
.btn:hover     { opacity: .85; }
.btn.primary   { background: var(--accent); color: var(--bg); }
.btn.secondary { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
*/

/* ── password list ── */
.pw-list { display: flex; flex-direction: column; gap: .3rem; }
.pw-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: .45rem;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  cursor: pointer; transition: background .12s;
}
.pw-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.pw-value {
  flex: 1; font-size: .85rem; letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.copy-icon { opacity: .3; flex-shrink: 0; transition: opacity .12s; }
.pw-row:hover .copy-icon { opacity: .8; }